Today I am going to give you a simple but very useful jQuery plugin which can load images on page scroll called lazy loading, if you used high resolution images on your website then it’s a best solution for you to make your web site looks professional. This makes the page load faster and reduce server traffic since the client loads the images in the region what they look at.

I have used a plugin Devrama Lazyload you can download it and use it in your web projects.

HOW TO USE IT

First of all include jQuery and this plugin in your html page.

<script src="jquery-1.9.1.min.js"></script>
<script src="lazy-loading-images-jquery/jquery.devrama.lazyload.min-0.9.3.js"></script>

You must include these 2 files in your project.

Add Images:

Images markup used data attribute not src attribute let see example.

<img data-size="1024:588" data-lazy-src="images/1.jpg" />
<img data-size="1024:588" data-lazy-src="images/2.jpg" />
<img data-size="1024:588" data-lazy-src="images/3.jpg" />
<img data-size="1024:588" data-lazy-src="images/4.jpg" />
<img data-size="1024:588" data-lazy-src="images/5.jpg" />
<img data-size="1024:588" data-lazy-src="images/6.jpg" />
<img data-size="1024:588" data-lazy-src="images/7.jpg" />
<img data-size="1024:588" data-lazy-src="images/8.jpg" />
<img data-size="1024:588" data-lazy-src="images/9.jpg" />

Used data-size for image width and height you have to define it like this for image height and width, data-lazy-src used to give image path no need to use src for this lazy load plugin.

Call method of lazy loading

<script type="text/javascript">      
    $(function(){
        $.DrLazyload(); //Yes! that's it!
    });
</script>

This above function apply lazy loading on all your images which is on lazy loading format.

You can also use this lazy loading on a particular area of your document with ids like below.

<script type="text/javascript">      
$(function(){
    $('#content').DrLazyload();
});
</script>

This code will apply lazy loading on content div only.