Lazy loading náhledových obrázků

Rychlost načítání WordPress šablon je poměrně problematická záležitost. Takové jednorázové doporučení je většinou použít cache plugin. Chtěl bych se ale dnes zmínit o Lazy loadingu obrázků a jeho použití v šabloně. Tento postup umožňuje nenahrávat všechny obrázky při načítání stránky, ale pouze ty, které jsou vidět na obrazovce.

Představte si situaci, kdy přijdete na internetový magazín, načítá se cela řada náhledových obrázků, ke kterým teprve srolujete.

Pomocí lazy ladingu se obrázky načtou, až budou potřeba. Více o Lazy loadingu na blogu Vzhůrudolů.cz.

Pro postupné načítání obrázků jsem zvolil script Unveil, který naleznete zde. V podstatě vám stačí do šablony vložit soubor jquery.unveil.js, ostatní soubory, které si stáhnete, nepotřebujete.

Do js souboru, ve kterém máte jQuery funkce přidejte:

$(document).ready(function() {
  $("img").unveil();
});

A pak už vám stačí pouze upravit tag img z:

na:

Lazy.png je obrázek o velikosti 1px x 1px, kterým nahradíme původní obrázek.
Jednoduché, že?

Bohužel pro WordPress musíte upravit script, pro vykreslování náhledových obrázků, tak, aby se nahrazovali automaticky.
Ve vaší šabloně můžete mít následující kód:

if ( has_post_thumbnail() ) :
  the_post_thumbnail();
endif;

Protože potřebujeme získat url náhledového obrázku, tu přesunout do data-src a do src vložit jednopixelový obrázek, budeme muset upravit kód následovně:

global $post;
if (has_post_thumbnail( $post->ID ) ) {

$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),array(100, 100) );

    $args = array(
      'src'      => get_template_directory_uri(). '/images/lazy.png',
      'data-src' => $src[0]
    );
?>
$echo = get_the_post_thumbnail( $post->ID, array(100, 100),$args);

}

Pomocí get_post_thumbnail_id získáme id přiřazeného obrázku. Protože je v originální velikosti, získáme url thumbnailu pomocí wp_get_attachment_image_src, kde array() je velikost náhledu, která může být zadána i textově.
Pomocí třetího argumentu funkce get_post_thumbnail, změníme src, tedy url obrázku na naši jednopixelovou náhradu a url thumbnailu vložíme do data-src.

A to je vše. Unveil umožňuje i načtení obrázku, třeba 100 px pod hranou obrazovky, vše najdete v dokumentaci.

Doplnění:
Díky Jaroslavovi za tip, k nahrazení všech náhledových obrázků můžeme využít filter post_thumbnail_html.
Pak stačí do functions.php přidat následující funkci:

add_filter( 'post__thumbnail_html', 'musilda_lazy_loading' );

function musilda_lazy_loading($html,$post_id,$post_thumbnail_id,$size,$attr){

$src = wp_get_attachment_image_src( get_post_thumbnail_id($post_id),$size );

$html = '

return $html;

}

Netestováno, takže bez záruky.