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
- Plugin WordPress "quoll_img_lazy_loading" su GitHub
- WordPress è un potente software open source che puoi usare facilmente, e liberamente, per creare siti, blog, forum, app;
- l'attributo lazy loading per caricare le immagini immediatamente o quando una condizione si verifica;
- lista dei browser che rispettano il caricamento lazy tramite tag "onloading";
- Come realizzare un plugin con WordPress;
- Articolo ufficiale WordPress che la versione 5.5 ingloba il lazy-loading sulle immagini.
