Upload all images to a page before opening it may be heavy in some cases. The solution in such cases can be one time loaded the page go gradually loading the set of images that are displayed in the time (lazy load). As is becoming scroll loads the images that you will need for its correct visualization.
If you are using the library jQuery, we can use the plugin jQuery LazyLoad to simplify this task.
<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: here
Download: here
