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.
// latest version of jQuery core file
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.
$("img.lazy-load").lazyload({
event : "click"
});
OR you can write javascript code like following and call image based on class.
$(".lazy-load").lazyload();
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.
