logo

Lazy Loading Gravatars ve WordPressu

Většina témat WordPress zobrazuje uživatele Gravatars ve vláknech komentářů. Je to způsob, jak uživateli zobrazit obrázek, který je spojen s použitou e-mailovou adresou. Je to pěkný dotek a v dnešní době téměř očekávaný designový vzor.

Každý z těchto gravatarů je však individuální požadavek HTTP, jako každý jiný obrázek. Vlákno komentářů s 50 komentáři znamená 50 požadavků HTTP a ne vždy se jedná o příliš malé soubory. Ano.

Pojďme je líně načíst.

Koncept

Líné načítání je myšlenka, že o obrázek vůbec nepožadujete (žádný požadavek HTTP), pokud není obrázek viditelný. To znamená, že pomocí JavaScriptu jsme zjistili, že obrázek je viditelný.

Abychom zastavili tyto HTTP požadavky na dosud neviděné obrázky, musíme se dostat přímo k označení. Pokud existuje <img src=""> v HTML v podstatě neexistuje žádný způsob, jak zabránit prohlížeči ve stahování tohoto obrázku, jakmile je to možné, ať už je vidět nebo neviditelný. Takže musíme odstranit to src a vraťte jej zpět, až budeme připraveni.

Páni, tady

Tady stojí za to se zastavit, protože jsme vstoupili na nějaké temné území.

Odebráním src z těchto obrázků a vždy je vracíme zpět pomocí JavaScriptu, jsme se rozhodli, že jsme ochotni dodat mírně neplatné HTML a 100% se spolehnout na stažení a spuštění skriptu, aby tyto obrázky byly vůbec vidět.

Jsem s tím v pořádku. Většinou proto, že gravatary jsou stejně jen vylepšení. Nevadí, když se nikdy neobjeví. Ve většině debat o JavaScriptu nejsem zastánce tvrdé linie, ale toto se zdá být obzvláště jasným případem, kdy se můžeme bez obav opřít o JavaScript.

Změna kódu HTML

Toto je změna, kterou bychom provedli:

<!-- Normal image. No beating the browser preloader. -->
<img src="https://gravatar.whatever..." alt="" />

<!-- Let's change to this, which won't download anything. -->
<img data-src="https://gravatar.whatever..." alt="" />

Ačkoli chybí src na <img> je technicky neplatné HTML. Téměř jistě na tom nezáleží, že to neovlivní, jak něco funguje. Pokud se vyskytnou neplatné chyby HTML, můžete tam vždy vložit super minimální prázdnou adresu URL dat GIF, například:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" ... />

Pomocí width a height atributy je pravděpodobně také dobrý nápad, zachovat rozložení a vyhnout se přeformátování, pokud a kdy se obrázky načítají.

Změna kódu HTML… ve WordPress

Jak ale změníte HTML, které WordPress vyplivne jako součást komentáře? Komentáře jsou ve WordPressu trochu neobvyklé v tom, že jádro WordPress vám dává HTML, není součástí vašeho tématu jako většina ostatních HTML.

V souboru `comments.php` pravděpodobně uvidíte tuto funkci:

<?php wp_list_comments(); ?>

Což vyplivne hromadu <li> s celým vaším vláknem komentářů. Není mnoho příležitostí, jak si pohrávat s výstupem obrázků. Kromě toho, můžeme! Můžeme tam uvést funkci zpětného volání:

<?php wp_list_comments('callback=csstricks_comment'); ?>

Toto zpětné volání je název funkce, kterou můžeme vložit do našeho souboru `functions.php`. Zde je příklad této funkce, která musí vrátit <li> :

function csstricks_comment($comment, $args, $depth) {

  $GLOBALS['comment'] = $comment; ?>

  <li <?php comment_class(); ?>">

     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="50" height="50" class="lazyload-gravatar" alt="User Avatar" data-src="<?php echo get_avatar_url(get_comment_author_email($comment_ID), array("size" => 160)); ?>">

     <?php comment_text(); ?>

  <?php # phantom </li> ?>

<?php }

To je velmi zjednodušené, ale můžete vidět, co jsme udělali. Nahradili jsme src s prázdným GIFem jsme přidali class jméno, které nakonec použijeme v JavaScriptu k línému načítání, přidali jsme data-src na skutečný gravatar a my používáme width a height atributy pro zástup. Zde je moje aktuální kompletní zpětné volání naživo na CSS-Tricks.

Pokud bychom to odeslali hned teď, bez jakékoli práce s JavaScriptem, stále bychom měli perfektně funkční vlákno komentářů, jen s obrázky, které se nikdy nenačtou.

Nyní jsme připraveni k lenošení

Těžší část je u konce. Nyní jsme dokonale připraveni provádět líné načítání. Pokud bychom měli napsat skript, bylo by to takto:

  1. Zjistěte viditelnou oblast okna prohlížeče
  2. Zjistěte pozici na stránce každého obrázku pomocí třídy .lazyload-gravatar
  3. Pokud se některý z těchto obrázků nachází ve viditelné oblasti, vynechejte src s hodnotou z data-src
  4. Pokud se viditelná oblast okna prohlížeče nějakým způsobem změní, přehodnoťte výše uvedené

Mohli jsme se pustit do psaní toho sami. A mohli jsme to udělat! Ale, a jsem si jistý, že vás to nepřekvapuje, je to trochu složité a jemné. Záležitosti týkající se různých prohlížečů, problémy s výkonem, problémy týkající se práce s mobilními zařízeními, abychom jmenovali alespoň některé. To je věc, kvůli které se rád opřu o práci druhých, než abych se převaloval.

Opět není překvapením, existuje spousta možností, ze kterých si můžete vybrat. V mém případě šťastně používám jQuery na CSS-Tricks a vybral jsem si jQuery založený na tom, který mi přišel docela dobrý:

API je tak jednoduché, jak jen může být. Po sbalení lib se zbytkem libs, které používám, zavolám:

$('.lazyload-gravatar').Lazy();

Podívejte se, jak pěkně to funguje!

To je strašně moc uložených HTTP požadavků a strašně dobrý výkon.

Přejete si, aby se webové standardy a prohlížeče v tomto spojily a vytvořily z toho nativní funkci.