Load images when the user scrolls down to each image

This article shows you, How you can save loading time of your web page by not allowing unwanted images to get load.

Your webpage load time increases by loading lots of images, after reading this article and implementing this effect on your

page, you can decrease your page load time almost 30%.

So Only allow images to get load on browser when it is needed, i.e when you scroll down to page, whereever images are there,
than perticular images will load at that time only.

You can achive this by using Jquery function called LazyLoad,

So to achive this, you will need to add Jquery File jQuery-1.4.1.js and one more file Jquery_002.js

You can download both file from here
http://www.filefactory.com/file/b3bcaaf/n/JS.zip

<script language="jscript" type="text/javascript" src="js/jquery-1.4.1.js"> 

</script> 
<script src="JS/jquery_002.js" type="text/javascript"></script>

After including above two files in your page, you will need to add below javascript file on top in head part of Page.

<script type="text/javascript">
    jQuery(document).ready(function($) {

        if (navigator.platform == "iPad") return;

        jQuery("img").lazyload({
            effect: "fadeIn",
            placeholder: "images_b/grey.gif"
        });
    });
</script>

Note : if you are using iPhone or iPad, then you might be familier with this effect, when you scroll down on page in iphone,
Images loads on that part only.

Hope this post will help you,
if yes please put comment below of this page,
Rajesh Singh,
Senior Asp.Net Developer
Email: raj143svmit@gmail.com
e-Procurement Technologies Ltd (India)
www.abcprocure.com