Lazy loading delle immagini con jQuery
Pagina 1 di 3
Una caratteristica molto importante di un sito web è sicuramente la velocità di caricamento delle sue pagine. A fronte di un sito lento, che impiega troppo tempo a farci vedere quello che vogliamo, infatti, la maggior parte degli utenti chiude la pagina passando ad un sito alternativo o concorrente. Internet non è uno strumento per gente paziente ;-)
La tecnica di Lazy Loading (traducibile in "caricamento pigro") delle immagini serve appunto ad evitare attese lunghe quanto inutili all'interno di una pagina web. Tale tecnica di programmazione non è, in realtà, riferita alle sole immagini ma riguarda tutte le risorse "inutili" al momento del caricamento, riorse che verranno, ovviamente, recuperate "on demand" nel momento in cui ce ne sarà il bisogno.
Noi affronteremo il discorso delle immagini in quanto sono essenzialmente la parte più pesante di una pagina web. L'utente avviata una pagina infatti non è detto che visionerà tutte le immagini, magari perchè queste sono nascoste o più semplicemente perchè posizionate a fondo pagina o in una zona distante rispetto all'informazione cui l'utente vuole accedere.
Situazioni di questo genere si verificano soprattutto per pagine molto estese, come possono essere quelle dei blog (le quali, a cusa di molti commenti, possono essere davvero molto lunghe). In circostanze come questa non ha senso caricare tutte le immagini all'avvio, soprattutto perchè quelle posizionate a fondo pagina potrebbero non essere mai visionate!
Per attuare la tecnica del Lazy Loading si può operare in diversi modi.
La soluzione più banale che viene in mente è quella di rimuovere le immagini al volo dal DOM tramite Javascript. Questa però sarebbe anche la via più sbagliata in quanto i browser comunque avrebbero inoltrato la richiesta dell'immagine e non si otterrebbe a pieno l'effetto desiderato.
Una buona tecnica, evidenziata nell'articolo di Paul Hammond Speed Up Your Site with Delayed Content è, invece, quella di utilizzare gli attributi personalizzati in HTML5. Vediamo come fare.
