How to create lazy loading images using jQuery

The Lazy plugin for jQuery load specified images after the page load itself and speed up your loading time,
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.

Click here for Demo        Download Script

I have used a plugin Devrama Lazyload you can download it and use it in your 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>
&ltscript src="http://demo.phpgang.com/lazy-loading-images-jquery/jquery.devrama.lazyload.min-0.9.3.js">

</script>

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(); 
    });
</script>

his 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 using class or id.

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

This code will apply lazy loading on main div only.