Html5 Picture Lazy Load Cross Browser

| | 0 Comments

Con HTML5 è stato introdotto il tag <picture> particolarmente utile per siti responsivi, grazie ad esso infatti è possibile definire che immagine caricare in base alle media query che si vanno a scegliere. Di seguito ecco un banale esempio di picture lazy load, il meccanismo è sempre uguale a quello applicato al tag <img>, ovvero cambiare src tramite data-src, nel picture va fatto per ogni tag <source> cambiando l’srcset tramite data-srcset, al verificarsi di un particolare evento che questa volta è il click su un bottone.

Picture Lazy Load: esempio semplice

See the Pen Example of a simple Html5 Picture Lazy Load by Serafino Bilotta (@Eddie84) on CodePen.10440

Cross Browser Picture Lazy Load con picturePolyfill.js

Il tag picture per ora è supportato nativamente solo da Chrome 38+, quindi per essere compatibile con i vecchi browser abbiamo bisogno di un polyfill, per questo esempio ho scelto:

Questo script è molto semplice da usare, basta solo includerlo nella vostra pagina e in automatico i vostri picture funzioneranno anche su vecchi browser.

La situazione cambia con il lazy load, infatti come vedete nel js di esempio, al termine della modifica dei source richiamo:

picturePolyfill.parse(document.getElementById('container'), false);

Questo perchè inizialmente non vengono trovati srcset quindi bisogna parserizzare nuovamente le picture modificate, passando alla funzione il container per non scannerizzare tutto il document, e false per saltare il controllo della cache altrimenti non funzionano i nuovi srcset.

Per i vecchi IE lo script richiede un’immagine di default tramite il tag data-default-src direttamente al <picture>.

Picture Lazy Load: un caso d’uso con lo scroll

Di seguito un esempio più complesso con la condizione che l’elemento sia visibile sul viewport:

See the Pen Loading Effect for Items and Picture Lazy Load by Serafino Bilotta (@Eddie84) on CodePen.10440

Tags: , , , , , ,

Category: Programmazione

About the Author ()

Studio Ingegneria Informatica e Bio. all' Università Magna Graecia di Catanzaro, sono appassionato di informatica, e mi piace praticare la pesca nelle acque dolci.