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:

<img src="obrazek.jpg" alt="">

na:

<img src="lazy.png" data-src="obrazek.jpg" alt="">

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 = '<img class="attachment-'.$size.'" 
src="'.get_template_directory_uri(). '/images/lazy.png"' 
data-src="'.$src[0].'" alt="'.$attr['alt'].'" />
 
return $html;
 
}

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

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

2 Comments

  1. Jaroslav Polakovič

    Pokud chci nahradit všechny thumbnaily, tak je lepší se hooknout do filtru post_thumbnail_html a přepis atributů udělat centrálně tam.

    Odpověď
  2. mirekk

    Díky za zajímavý návod. V této souvislosti bych se chtěl zeptat, zda na mé stránce je tento způsob načítání použit, anebo jde o něco jiného. Když roluji stránkou dolů, je vidět, že obrázky se postupně načítají. Že by tvůrci zrovna mé šablony byli tak pokrokoví? :-)
    Díky za váš názor.
    http://www.4koridor.cz

    Odpověď

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *