Updated March 29, 2023
Introduction to JQuery lazyload
jQuery Lazy Load refers to the technique of delayed loading of the content on websites having long web pages. This is basically an optimization technique that lets the users use heavy websites without slowing down the application by loading only the required sections instead of prefetching and loading the entire web page in one go. The concept of lazy loading assists in delaying the loading of content until the user actually requires it. This helps reduce the application start time, increase the speed of the application, enhance the user experience, and reduce server load. In this topic, we are going to learn about JQuery lazyload.
Syntax
$("selector.classname").lazyload();The above syntax causes all the DOM elements of class classname to be lazy-loaded, where
- selector refers to the DOM element, which will be loaded with delay.
- classname term is self-explanatory.
How does JQuery lazyload Work?
- jQuery Lazy Loading also referred to as on-demand loading, is a concept used to optimize the content delivery on the websites by delaying the unnecessary loading of the object until it is actually required.
- This optimization technique helps improve performance, lessen memory usage, save system resources, and thus speed up the application.
- Let us consider a heavyweight website with large images. The user wants to see a particular image from this website for which he sends a request. Now, the entire web page is loaded with all its content, but the user only sees the first image and closes the web page. This will unnecessarily lead to the wastage of resources because the remaining content remained left unseen. Lazy loading is the solution to this.
- The images placed at the bottom of a page or outside the viewport will not even be loaded until the user scrolls all the way down. This is called infinity scroll where, the web content is loaded only as of the user scrolls down the page, avoiding the prefetching and loading of content that the users might never require.
Examples of JQuery lazyload
Let us now look at a few examples to understand the concept of lazy loading implementation by jQuery in detail.
Example #1
Given below is an example that implements jQuery Lazy Loading on a webpage.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://rawgit.com/intoro/Lazy_Load_JQuery/master/js/2_2_4_jquery.min.js"></script>
<script src="https://rawgit.com/intoro/Lazy_Load_JQuery/master/js/1_9_7_jquery.lazyload.js"></script>
<script>
$(document).ready(function () {
$("img.lazy").lazyload({
effect: "fadeIn",
});
});
</script>
</head>
<body>
<img class="lazy" data-original="1.jpg" width="700" height="700" />
<img class="lazy" data-original="2.jpg" width="700" height="700" />
<img class="lazy" data-original="3.jpg" width="700" height="700" />
<img class="lazy" data-original="4.jpg" width="700" height="700" />
<img class="lazy" data-original="5.jpg" width="700" height="700" />
<img class="lazy" data-original="6.jpg" width="700" height="700" />
<img class="lazy" data-original="7.jpg" width="700" height="700" />
<img class="lazy" data-original="8.jpg" width="700" height="700" />
</body>
</html>Output
- The below screen displays when the above code is executed.
- Lazy loading allows only those images in the viewport to be loaded on the web page, and the remaining images load only as of the user scrolls all the way down on the web page.
- In the given example, there are in total eight images on this web page, but as shown in the picture, only those images get loaded, which are in the viewport; the rest of the others load when the user starts scrolling down the page.
Example #2
Following is another example that shows the implementation of jQuery Lazy Loading.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>
<script>
$(document).ready(function () {
$("picture.lazy img").lazyload({
threshold: 0,
appear: function () {
$.each($(this).siblings("source"), function () {
var $this = $(this);
$this
.attr("srcset", $this.attr("data-srcset"))
.removeAttr("data-srcset");
});
},
});
});
</script>
<style>
p {
height: 800px;
}
</style>
</head>
<body>
<p style="color: brown; font-weight: bold; font-size: 20px;">
The image is below and will only be loaded when the user scrolls to it.
</p>
<picture class="lazy">
<source data-srcset="https://cdn.educba.com/1.jpg" />
<source data-srcset="https://cdn.educba.com/2.jpg" />
<source data-srcset="https://cdn.educba.com/3.jpg" />
<source data-srcset="https://cdn.educba.com/4.jpg" />
<img height="700px" width="700px" />
</picture>
</body>
</html>Output
- The below screen displays when the above code gets executed.
- As the user starts scrolling down, the image on the website, which is placed at the bottom of the web page, gets fetched and loaded on the page, as shown below.
Example #3
Given below is another similar example illustrating the jQuery Lazy Loading technique.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://emn178.github.io/jquery-lazyload-any/src/jquery.lazyload-any.js"></script>
<script>
function load(img) {
img.fadeOut(0, function () {
img.fadeIn(10000);
});
}
$(".lazyload").lazyload({ load: load });
</script>
</head>
<body>
<div class="lazyload">
<p>Image1</p>
<img src="1.jpg" width="700" height="700" />
</div>
<div class="lazyload">
<p>Image2</p>
<img src="2.jpg" width="700" height="700" />
</div>
<div class="lazyload">
<p>Image3</p>
<img src="3.jpg" width="700" height="700" />
</div>
</body>
</html>Output
- The below screen displays when the above code gets executed.
- All the images are not loaded at once on the web page; instead, they get loaded as soon as they enter the viewport.
Advantages of JQuery lazyload
- Reduces application startup time by reducing page weight.
- On-demand loading results in lesser memory consumption.
- Lesser time and resource utilization lead to cost optimization.
- Boosts up the application performance by reducing the server load.
- Provides enhanced and enriched user experiences.
- Avoids unnecessary code execution and resource downloads.
Disadvantages of JQuery lazyload
- The code becomes complicated due to the extra lines of code added.
- Improper indexing of the unloaded content may affect the websites’ rankings on search engines.
Conclusion
- This article walked you through the concept behind Lazy Loading and its implementation using jQuery.
- Lazy Loading is a modern web technique for the optimization of system resources, time,
- and memory.
- It greatly helps improve the performance of the application by reducing the server load and memory consumption.
- Although there are some pitfalls, the big advantages of it make us overlook them.
Recommended Articles
This is a guide to JQuery lazyload. Here we discuss How does jQuery Lazy Load Work and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
