Cargar todas las imágenes a de una pagina antes de abrirla puede resultar pesado en ciertos casos. La solución en esos casos puede ser una vez se ha cargado la pagina ir cargando progresivamente el conjunto de imágenes que se visualizan en ese momento (lazy load). Segun se va haciendo scroll va cargando las imagenes que se va a necesitar para su correcta visualizacion.
Si estamos usando la librería jQuery, podemos usar el plugin jQuery LazyLoad para simplificar esa tarea.
<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: aqui
Descargar: aqui
