UX & Coding
-50% su Hosting WordPress con Serverplan (codice promo NM50)

Image Lazy Load: un metodo semplice e leggerissimo

"Rimandare il caricamento delle immagini può velocizzare sensibilmente i tempi di risposta dando priorità ai contenuti più importanti"

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.

Lazy load

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.

Codice completo per ottenere l'effetto di Lazy Load


Ovviamente il risultato si potrà notare su pagine che hanno immagini più pesanti o che vengono caricate più lentamente.

Unisciti alla community! Rimani aggiornato, scopri le migliori guide e ricevi risorse gratuite.



6 commenti

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.