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:

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

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

You can also check the demo from the link below.



This plugin works


Written by Deepanker

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Leave a Reply

Your email address will not be published. Required fields are marked *


Best third-party email apps for Mac OS X

Best third-party email apps for Mac OS X

Buy backlinks

Why You Should Never Buy BackLinks; Avoid Such Services