|
1 2 3 4 5 6 |
<script> window.lazyLoadOptions = { /* your lazyload options */ }; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.2.0/lazyload.min.js"></script> |
In un precedente articolo, abbiamo visto come integrare il caricamento on scroll delle immagini con Lazyload JS. Possiamo naturalmente applicare lo stesso meccanismo ad un tema WordPress.
Nella pagina di un post, quindi ad esempio nel file
single.php , WordPress posizionerà le immagini contenute nell’articolo come responsive images e lo farà usando la tecnica dell’attributo srcset del tag
<img> . Se non conoscete questo meccanismo, è molto semplice: all’interno del tag <img> sono presenti diverse dimensioni della stessa immagine e la loro larghezza (width). Il browser selezionerà automaticamente quella adatta alla densità (leggi DPI) dello schermo dell’utente.
Vediamo un esempio di <img> responsive generata da WordPress:
|
1 2 3 4 5 6 |
<img srcset="/maxresdefault.jpg 1280w, /maxresdefault-300x169.jpg 300w, /maxresdefault-768x432.jpg 768w, /maxresdefault-1024x576.jpg 1024w" sizes="(max-width: 1280px) 100vw, 1280px"> |
In questo esempio è ben chiaro che l’immagine è presente in varie misure, dalla più piccola, larga appena 300px (300w) alla più grande da 1280px di larghezza (1280w). Quello che chiediamo al browser è di prendere dal server e mostrarci la più adatta alla densità del nostro schermo.
Adesso facciamo andare d’accordo Lazyload con le responsive image.
Come abbiamo visto nell’articolo relativo a LazyLoad JS, esso si basa sull’attributo data-srcset e non sul srcset di default per le immagini. Vediamo allora come far generare correttamente i tag delle immagini dei nostri post per farli processare allo script. Ricordate che questo processo è retroattivo: la modifica funzionerà automaticamente per tutti i nostri post!
Iniziamo aggiungendo questo codice al file functions.php del nostro tema.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function replace_img_src($content) { if (!is_feed()) { $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8"); $document = new DOMDocument(); libxml_use_internal_errors(true); $document->loadHTML(utf8_decode($content)); $imgs = $document->getElementsByTagName('img'); if ($imgs) { foreach($imgs as $key=>$value) { if ($key !== 0) { $value->setAttribute('data-srcset', $value->getAttribute('srcset')); $value->removeAttribute('src'); $value->removeAttribute('srcset'); $value->removeAttribute('width'); $value->removeAttribute('height'); } } } $html = $document->saveHTML(); return $html; } } add_filter('the_content', 'replace_img_src'); |
La function replace_img_src() si occuperà di modificare automaticamente tutti i tag <img> presenti nel contenuto del post e riscriverà, per ciascuno, gli attributi data-srcset , scrset e src. A questo punto, dobbiamo includere lo script Lazyload e inizializzarlo.
Il modo più semplice per farlo è incollare questo codice all’interno del file footer.php del nostro tema, subito prima della chiusura del tag <body> :
|
1 2 3 4 |
<script> var myLazyLoad = new LazyLoad(); </script> <script async src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.2.0/lazyload.min.js"></script> |
Fatto, happy (lazy) loading!
