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.
1 2 3 4 | <script src="jquery.js" type="text/javascript"></script>// latest version of jQuery core file <script src="jquery.lazyload.js" type="text/javascript"></script> |
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,
1 2 3 | <img class="lazy-load" src="img/loader.gif" alt="" width="640" height="480" data-original="images/example.jpg" /> |
Step 3:
Now, Write javascript code which will trigger event based on class added into an image.
1 2 3 4 5 | $("img.lazy-load").lazyload({ event : "click" }); |
OR you can write javascript code like following and call image based on class.
1 2 3 | $(".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.
