How to use jQuery Lazy Load Plugin

6 mins0
Lazy loading images for website using jQuery plugin

Images play a vital role in enhancing the visual appeal of a website. However, large image files can significantly slow down page load times, leading to a poor user experience and hurting SEO. That’s where the jQuery Lazy Load plugin comes to the rescue!

In this post, we will walk you through the process of using this handy plugin to effortlessly load images on your website, improving performance and user satisfaction.

What is jQuery Lazy Load Plugin?

jQuery Lazy Load is a lightweight JavaScript plugin that helps optimize the loading of images on web pages. Instead of loading all the images at once, it allows you to delay the loading of images until they are about to be displayed within the user’s viewport. This technique is known as “lazy loading” and can significantly speed up the initial page load.

Download and Include the jQuery and Lazy Load Plugin

Before using the Lazy Load plugin, you need to ensure that you have the jQuery library included in your web page. You can find the plugin on the official jQuery Lazy Load GitHub repository.

You can either download both libraries or include them from a content delivery network (CDN). In this example, we will use CDNs:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

Include both script tags at the head section of a document or end of the body element. We prefer to load it at the end of body.

Define Image Elements with Lazy Loading

To enable lazy loading for your images, you need to modify their HTML markup slightly. Replace the src attribute with data-src and add a class or ID to target them with jQuery. For example:

<img class="lazy" data-src="path/to/image.jpg" alt="Example Image">

Initialize the Lazy Load Plugin

At last, we will initialize the Lazy Load plugin using jQuery. Add the below code after CDN links:

$(document).ready(function() {
    $('.lazy').lazyload();

    // Example with some configurations
    $('.lazy').lazyload({
        effect: 'fadeIn',
        visibleOnly: true,
    });
});

Here, we have used the .lazy class to target elements that are loaded after a document is ready. Here, we have taken 2 examples. Both will load images using lazy method. But in the second method, we have added some optional parameters like effect.

The Lazy Load plugin provides additional options for customization. You can specify a different loading image, adjust the delay time, or add effects to the image loading process. Refer to the plugin’s documentation for more details on available options and their usage.

Let’s see what full implementation looks like in minimum mode:

<!DOCTYPE html>
<html>
    <head>
        <title>Lazy Load Plugin Example</title>
    </head>
    <body>
        <img class="lazy" data-src="path/to/image1.jpg" alt="Example Image 1">
        <img class="lazy" data-src="path/to/image2.jpg" alt="Example Image 2">
        <img class="lazy" data-src="path/to/image3.jpg" alt="Example Image 3">

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.lazy').lazyload();
            });
        </script>
    </body>
</html>

Conclusion

With the jQuery Lazy Load plugin, optimizing image loading on your website has never been easier. By deferring the loading of images until they are visible within the user’s viewport, you can dramatically enhance performance and improve user satisfaction.

Related Articles