Make the page load faster using jquery Lazy Load Plugin

by Posted on

Hello Guys, In this tutorial we’ll talk about one of the very useful jquery plugin called Lazy Load Plugin and why we should use this plugin on our image based website.

What is jquery Lazy Load Plugin

Lazy Load is delays loading of images in long web pages. Suppose you have a website with lot’s of images then it’ll take long time to load the page, So using this plugin you can reduce page load time & In some cases it can also help to reduce server load.

And all images will not load on the same time until user scrolls to them. This is opposite of image preloading.

Lets talk about the it’s integration part.

To Integration this plugin on you website you first include jquery library because it is dependable on jquery library so include required libraries on your web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




Now put some sample images on your html pages.

<img src="img/loading.GIF" class="lazy" data-original="http://www.iamrohit.in/wp-content/uploads/2015/11/folder-lock.png">
<img src="img/loading.GIF" class="lazy" data-original="http://www.iamrohit.in/wp-content/uploads/2015/11/folder-lock-1.png">
<img src="img/loading.GIF" class="lazy" data-original="http://www.iamrohit.in/wp-content/uploads/2015/11/twitter-widget-1.png">
<img src="img/loading.GIF" class="lazy" data-original="http://www.iamrohit.in/wp-content/uploads/2015/11/twitter-widget.png">
<img src="img/loading.GIF" class="lazy" data-original="http://www.iamrohit.in/wp-content/uploads/2015/11/folder-lock-1.png">
<img src="img/loading.GIF" class="lazy" data-original="http://www.iamrohit.in/wp-content/uploads/2015/09/ubuntu-skype-1.png">
<img src="img/loading.GIF" class="lazy" data-original="http://www.iamrohit.in/wp-content/uploads/2015/08/rohit-kumar.jpg">

Where src=”img/loading.GIF” image will be display on page load time and it’s a loading gif image so that user can understand something is going to load in this section.
data-original=”IMAGE_PATH” in this tag you’ll put your actual image path which you need to display.

Now add lazy load jquery function on page to perform action.

<script>
$(function() {
    $("img.lazy").lazyload({effect : "fadeIn"});
});
</script>

DEMO DOWNLOAD

This is just a very basic function of lazy load plugin you can study more functions from here
http://www.appelsiini.net/projects/lazyload

If you like this post please don’t forget to subscribe my public note book for more useful stuff

Published by admin