Back to Top

How to use jQuery Lazy Load Plugin?

Lazy Load Plugin for jQuery Explained

Hello readers,

Today I am going to explain about lazy loading plug-in in jQuery which loads the page first and then page request go to load the images of the page.

And you can see here, Lazy load plug-in is simply great which decrease the loading time of the page and increase a performance of the site.

With the use of Lazy load plug-in in jQuery, you can load a long web pages containing many of the large images and load page faster and a browser will be in ready state after loading all visible images.In some cases, Lazy load plug-in can also help to reduce server load.

so, Let’s understand steps by step, How do you integrate the Lazy Load?

Step 1:

First of all, Include following js files into the head of your HTML.

Step 2:

Next, You need to set loader image into src of Img tag and set actual image path into a data-original attribute.see in below example,

Step 3:

Now, Write javascript code which will trigger event based on class added into an image.

OR you can write javascript code like following and call image based on class.

Also READ:

To Call Remote URL in $.ajax method in jQuery
To read JSON data with jQuery
Solution: Internet connection issue on AndroidEmulator

That’s it, You can also use it. It’s useful to load a page faster and decrease a load of the server.

Hope this helps someone else out.As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

The Readers’ Poll – November 2012

Posted on 6 years ago


How to Use the HTML5 Full-Screen API

Posted on 1 year ago


What is Wpautop() function in WordPress

Posted on 3 years ago


New Features in MySQL 5.6

Posted on 7 years ago