UX & Coding

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 parametri di caricamento arrivando a gestire 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 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) dele immagini per evitare una loro comparizione immediata.

img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

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