Lazy loading plugin: img con wordpress utilizzando un plugin apposito

Come già scritto nella FAQ precedente su WordPress e su "lazy loading" per far in modo che in WordPress le immagini si carichino in maniera asincrona in base all'attuale viewport del browser non è possibile farlo tramite l'editor integrato ma bisogna utilizzare appositi temi o plugin.

Ora vediamo lo stesso funzionamento della FAQ precedente utilizzando un plugin (un lazy loading plugin) invece che scrivere una funzione direttamente nel tema.

In questo modo anche cambiando tema l'effetto "lazy" rimarrebbe.

Lazy loading plugin

Supponiamo di chiamare il plugin "quoll_img_lazy_loading" allora il file principale nella sua directory, "quoll_img_lazy_loading.php" dovrà contenere almeno il seguente codice:

function quoll_img_lazy_loading_filter_the_content( $content ) {

// Check if we're inside the main loop in a post or page.

if ( ( is_single() || is_page() ) && in_the_loop() && is_main_query() ) {

// remove loading tag in img if exist

$content=preg_replace('/<img\s+([^>]*?)loading="[^"]*"\s*/',"<img $1",$content);

// add loading="lazy" in img elements

return preg_replace('/<img\s+/','<img loading="lazy" ',$content);

}

return $content;

}

add_filter( 'the_content', 'quoll_img_lazy_loading_filter_the_content', 100 );

Naturalmente mancano le intestazioni del plugin.

Il plugin completo lo possiamo trovare su GitHub.

Se invece vogliamo utilizzare anche un po' di javascript per rendere l'effetto "lazy" sulle immagini più compatibile con tutti i browser basta dare un occhio al progetto "quoll_img_lazy_loading_plus".

Novità WordPress 5.5

Da WordPress 5.5 dovrebbe esser inglobato il lazy-loading come da articolo ufficiale.

Riferimenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

+ 16 = 22