How to lazy load images with jQuery

Lazy load of images is the delay in loading of images to improve the speed. Images which are not visible in the viewport will not be loaded unit user scrolls down the page to them. Use of lazy load images improves the load time of page and improves user experience. In this article, I will explain how you can lazy load images with jQuery.

As I already told various times, we do not think of coding if open source plugins are already available. For this too, there are few nice plugins which we can directly implement for lazy loading. You can use jQuery Lazy plugin to implement lazy loading on your page. It is a lightweight background lazy-loading plugin for jQuery.

Use of this plugin is also very simple.

Just include the jQuery code in the header of the page:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/0.6.4/jquery.lazy.min.js"></script>

Then add images with class=”Lazy”. You can also add a image URL in src for showing a placeholder.

<img src="http://placehold.it/350x150/eaeaea/333333" data-src="ipad-605439_640.jpg" class="lazy" />
<img src="http://placehold.it/350x150/eaeaea/333333" data-src="navigation-1048294_640.jpg" class="lazy" />
<img src="http://placehold.it/350x150/eaeaea/333333" data-src="touch-screen-1023966_640.jpg" class="lazy" />
<img src="http://placehold.it/350x150/eaeaea/333333" data-src="woman-410320_640.jpg" class="lazy" />
<img src="http://placehold.it/350x150/eaeaea/333333" data-src="woman-638384_640.jpg" class="lazy" />

Now, call the lazyload plugin to add action in the images.

<script>
$( document ).ready(function() {
     $(function() {
        $('.lazy').lazy();
    });
});
</script>

You can also check the demo from the link below.

Demo

This plugin works