Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Chargez les images avec le scroll de la page. Lazy loading

Chargez les images avec le scroll de la page. Lazy loading

10/02/2014 par Dux   -   non-noté

Les images ne sont chargées que lorsqu'elles sont visibles dans la fenêtre (lazy loading). Le script fonctionne avec le scroll de la page et détecte si les images sont dans la zone visible. La fonction lazyClean prépare toutes les images sans que vous aillez à modifier votre code. Vous pouvez remplacer le favicon.gif par une image gif/png transparente.

Voir une démonstration de ce script en action :

Ouvrir dans une nouvelle fenêtre     Ouvrir dans la même fenêtre

code source



 
/*********** Lazy Loading ****************/

// Delete SRC
function lazyClean() {
       var
tabimg = document.getElementsByTagName('img');
       for (var
i = 0, l = tabimg.length; i < l; i++) {
               
// Add data-src and display a default image src
               
tabimg[i].dataset.src = tabimg[i].src
               tabimg
[i].src = '../i/favicon.gif';
       }
       
// display image with its src
       
lazyload();
       
document.onscroll = lazyload ;
}

// Lazy Load
function lazyload(){
       var
winTop = document.body.scrollTop;
       var
winH = window.innerHeight;
       var
tabimg = document.getElementsByTagName('img');
       for (var
i = 0, l = tabimg.length; i < l; i++) {
               if(
tabimg[i].offsetTop < (winTop + winH + 1) ) tabimg[i].src = tabimg[i].dataset.src;
       }
}
window.onload = lazyClean;

Testé avec Safari  Google Chrome  Firefox3  Firefox4  
Noter ce code     |     Copié : 4x

Commentaires pour Chargez les images avec le scroll de la page. Lazy loading

Aucun commentaire
Ajouter un commentaire Pseudo
ZOOM