How to lazy load images with jQuery

Lazy Load images

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="//"></script>
<script type="text/javascript" src="//"></script>

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

<img src="" data-src="ipad-605439_640.jpg" class="lazy" />
<img src="" data-src="navigation-1048294_640.jpg" class="lazy" />
<img src="" data-src="touch-screen-1023966_640.jpg" class="lazy" />
<img src="" data-src="woman-410320_640.jpg" class="lazy" />
<img src="" data-src="woman-638384_640.jpg" class="lazy" />

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

$( document ).ready(function() {
     $(function() {

You can also check the demo from the link below.


This plugin works

Tags: |

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

Similar Articles


Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Part of Techlomedia Internet Pvt Ltd Developed By Deepanker