Loading images on scroll using jquery

Lazy load is a Jquery plugin which helps in loading images on scroll with a delay, that is images which are outside the viewport are not loaded until the user wishes to view that area. This helps in loading the webpages faster since the images are loaded one after the other.

How to use this plugin?

Download the scripts from Github

Add the jquery.js and jquery.lazyload.js in your HTML using the script tag.

It is very simple after adding the scripts, Firstly edit the image tags by changing the image path from src attribute to data-original attribute and give a specific class to the images which must be loaded based on plugin.

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

PS:- Set the image dimensions either with width and height attributes or using CSS class.

At last call the lazyload from script as shown

$("img.lazy").lazyload();

By default the images are loaded when they appear on the screen. Images can be made load earlier by using the ‘threshold’ parameter to set the distance before which the image must be loaded. By setting the threshold value as 200 we make the image to load 200px before they appear.

Images can even be loaded based on events, such as loading the images onclick or onmouseover etc, by setting the ‘event’ property.Images by default are loaded and then shown, we can even change the procedure by setting an effect. This supports all the Jquery effects and has to be set to ‘effect’ parameter.

FAQs

1.Will this plugin work if the images are inside a container?

Yes it does.

2. Can i use this on a container which has horizontal scrolling?

Yes, plugin supports images inside a container with horizontal scrolling also.

3. Does this plugin loads the images every time i scroll?

No, the images are loaded only once.

4. Can i use this on the images which are loaded with AJAX?

Yes.

 

For more details and demos visit :- lazy load

Happy Coding………………….:)




Tagged as: ,