Lazy Load Images Plugin for jQuery

Hi.. Does your site take too much time to get loaded because of way too many images?

And what about those images which are at the bottom of your site which user hardly went up to but still getting loaded in page load?
Yeah, thats the problem!!

What if your image get loaded only when you scroll to that particular section/viewport where your image is. Does seems Nice :) ?
In this blog I will tell you how you can implement the Lazy Load plugin in your jQuery application to load the images only when required making your page load lightening faster. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. This also helps in reducing the server load as well. Before we get into this implementation lets have a demo of it by clicking on the following links:

• Basic Option
• Fade-In Effect

The plugin only works with jQuery. To implement the plugin follow these steps:

Step 1: Download the LazyLoad plugin from the following link:
https://www.appelsiini.net/projects/lazyload/jquery.lazyload.js

Step 2: Make sure to include both jQuery and LazyLoad plugin in your HTML code:

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
  

Step 3: Alter your image tags by adding the address of the image in the data-original attribute. And add a class to your images so that you can easily control to which images plugin is bound to.

<img class="lazy" data-original="img/example.jpg">

Step 4: Initialize the lazy loading of images by calling this function in the JavaScript

$(function() {
	$("img.lazy").lazyload();
});

This will cause all images of class lazy to be lazy loaded. See the Basic Options demo.

Thats all you have to do. Along with this there are certain properties which you can set to handle the loading of images as per your need:

Setting Threshold
If you want images to load earlier before actually going to the view port, use threshold parameter. Setting threshold to 400 will causes image to load 400 pixels before it appears on viewport. Example:

$("img.lazy").lazyload({
	threshold : 400
});

Setting Event to Trigger Loading
You can use jQuery event such as click or mouseover to load the images. Default is to wait until user scrolls down and image appears on the viewport. To load images only when user clicks them you could do:

$("img.lazy").lazyload({
	event : "click"
});

Using Effects
To add the fadeIn effect, use the following sample code. By default plugin waits for image to fully load and calls show() function.

$("img.lazy").lazyload({
	effect : "fadeIn"
});

For more details checkout this link

Thanks