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.
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:
- picturePolyfill
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.