Carregar todas as imagens de uma página antes de abri-la pode ser pesado em alguns casos. A solução nesses casos pode ser uma vez carregada a página ir gradualmente a carregar o conjunto de imagens que deben exibidas (lazy load). Encuanto faz scroll carrega as imagens que você precisará para sua correta visualização.
Se você estiver usando a biblioteca jQuery, podemos usar o plug-in jQuery LazyLoad para simplificar essa tarefa.
<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
Baixar: aqui