Il Lazy Load è una tecnica utilizzata per richiamare un determinato tipo di risorsa in modo asincrono, ovvero dopo che i contenuti principali sono già stati caricati.
Viene spesso utilizzata per le immagini perché solitamente sono tra le componenti della pagina che influiscono maggiormente al tempo di caricamento e che possono contribuire a generare punti di blocco in fase di rendering.
Come si implementa il Lazy Load
Per implementare all’interno di un sito il Lazy Load ci sono innumerevoli librerie JavaScript che permettono di gestire e personalizzare molti parametri di caricamento arrivando a rimandare il download dell’immagine solo in concomitanza dello scroll.
Questo articolo ha lo scopo di illustrare un metodo basilare ma estremamente semplice e leggero che prevede la scrittura di pochissime righe di codice.
Manipolazione dell’HTML
Prima di tutto è necessario bloccare il caricamento nativo delle immagini con un piccolo trucco: al posto di usare l’attributo src dovremo utilizzare data-src: in questo modo il browser non trovando il percorso dell’immagine ignorerà temporaneamente il caricamento.
<img data-src="/percorso/immagine.jpg" alt="Testo alternativo" />L’attributo HTML5 data-* è utilizzato per fornire informazioni supplementari personalizzate ma in questo caso viene sfruttato per posticipare il caricamento delle immagini.
Il codice JavaScript
Al caricamento della pagina questo script basato su jQuery non farà altro che sostituire l’attributo data-src per tutte le immagini con src per consentire al browser di caricare e mostrare le immagini.
$( document ).ready(function() {
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
});Un tocco di stile
Aggiungendo al CSS queste proprietà si otterrà un effetto di apparizione (fade in) delle immagini per evitare una loro comparizione immediata.
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}Codice pronto all’uso
Per avere una buona base di partenza è possibile scaricare un template completo con CSS e JavaScript che integra al suo interno tutto il codice necessario al funzionamento di questo effetto.
Ovviamente il risultato si potrà notare su pagine che hanno immagini più pesanti o che vengono caricate più lentamente.
Ciao, come faccio ad entrare nell’HTML della singola pagina per modificare la singola pagina wp?
Non mi è chiara la domanda, per modificare una pagina a livello di template devi personalizzare il tema; se intendi invece un singolo contenuto ogni pagina avrà il suo corrispettivo post.
Questa soluzione funziona per tutti i browser? su tutti i sistemi operativi?
Sì, dato che si basa su un principio molto semplice è molto difficile che non funzioni correttamente.
A me non funziona, non riesco a capire lo sbaglio esiste un esempio? grazie
L’esempio è la guida stessa 🙂 Prova a replicare il funzionamento su una pagina statica (html) molto semplice.
Buongiorno Nicholas,
ho provato il tuo codice ma le immagini durante lo scroll risultano già caricate, non funziona come il lazy che nel momento in cui l’immagine entra nel campo visivo viene caricata.
La tua osservazione è corretta, questo tipo di lazy load (a differenza di quello che hai ben descritto) serve per ottimizzare il caricamento della pagina privilegiando le risorse e i contenuti principali: è una semplice alternativa che si basa su un presupposto differente.