Télécharger toutes les images sur une page avant de l'ouvrir peut être lourd dans certains cas. La solution dans ce cas peut être une fois chargé la page aller cargar progressivement l'ensemble des images qui devront s'afficher (lazy load). Au fur et à mesure qu'on scrolle les images dont vous aurez besoin se chargent pour sa visualisation.
Si vous utilisez la bibliothèque jQuery, nous pouvons utiliser le plugin jQuery LazyLoad pour simplifier cette tâche.
<html>
<head>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
</script>
</head>
<body>
<img class="lazy" data-original="img1.jpg" width="640" height = "480"/>
<img class="lazy" data-original="img2.jpg" width="640" height = "480"/>
<img class="lazy" data-original="img3.jpg" width="640" height = "480"/>
</body>
</html>
Doc: ici
Télécharger: ici