Le pagine web contengono risorse che non necessariamente devono essere visualizzate immediatamente. Immagini, video, i-frame, audio, ecc. possono tranquillamente essere scaricati solo quando l’utente li richiede o comunque in un secondo momento a tutto vantaggio dei tempi di caricamento della pagina. In questo articolo mostreremo quali sono le specifiche CSS e HTML da utilizzare per implementare il cosiddetto Lazy Load.
Attributo Lazy Load
L’attributo Lazy Load HTML5 gestisce il load delle pagine web e le ottimizza per il network contention. Le risorse LazyLoad sono scaricate sempre in maniera asincrona. Facciamo un esempio:
<!doctype html>
<html>
<head>
<title>Attributo Lazy Load</title>
</head>
<body>
<img src=”Im-1.png” lazyload />
<img src=” Im -2.png” />
<img src=” Im -3.png” lazyload />
<img src=” Im -4.png” />
</body>
</html>
Osservazioni:
- Le immagini sono sempre scaricate in maniera asincrona dal browser. Lo stesso accade per le risorse LazyLoad. In assenza di problemi di network contention le 4 immagini vengono scaricate così come sono ma l’evento onload si verifica appena le immagini Im -2.png e Im -4.png vengono scaricate senza attendere anche il download delle immagini Im -1.png e Im -3.png.
- In caso di network Contention il download delle immagini Im -1.png e Im -3.png viene messo in pausa fino a quando il problema non viene risolto.
Elementi HTML che supportano l’attributo LazyLoad
Diversi elementi HTML supportano tale attributo:
- Img
- Audio
- Video
- Embed
- Iframe
- Object
- svg feImage
- svg image
- svg use
- svg script
- svg tref tags
Script
Quattro I possibili scenari quando LazyLoad è applicato ai tag <script>
- Attributi LazyLoad e async presenti. Il comportamento LazyLoad è quello previsto.
- Attributi LazyLoad e defer presenti. L’attributo defer prevale su LazyLoad.
- Presente solo l’attributo LazyLoad. Il comportamento è quello previsto.
- Se l’attributo IDL dell’elemento è impostato su FALSO, l’attributo LazyLoad non ha nessun effetto.
Link
Se l’attributo LazyLoad è utilizzato su un elemento link, il foglio di stile ad esso collegato viene scaricato in maniera asincrona e LazyLoad agisce come previsto.
Attributo HTML PostPone
Quando l’attributo PostPone viene applicato il download dell’immagine avviene solo quando l’utente visualizza l’elemento.
La risorsa è scaricata in maniera asincrona.
L’evento onload non aspetta che l’elemento PostPone sia scaricato e si verifica appena tutte le altre risorse sono state scaricate.
Elementi che supportano l’attributo PostPone
- Img
- Audio
- Video
- Embed
- Iframe
- Object
- svg feImage
- svg image
- svg use
- svg script
- svg tref
Come applicare LazyLoad e PostPone tramite CSS
È possibile applicare questi due attributi agli elementi HTML che li supportano utilizzando la proprietà resource-priorities CSS.
<!doctype html>
<html>
<head>
<title>Lazy Load Attribute</title>
<style type=”text/css”>
.class1
{
resource-priorities: lazyload;
}
.class2
{
resource-priorities: postpone;
}
</style>
</head>
<body>
<img src=”1.png” class=”class1″ />
<img src=”2.png” class=”class2″ />
<img src=”3.png” class=”class1″ />
<img src=”4.png” class=”class2″ />
</body>
</html>
