Reading Time: 4 minutes

4,250 Views

Inside this article we will see the concept of lazy loading image using jquery. Article contains a classified information about implementing lazy loading concept for images.

Currently this concept is used in several websites. It increases the website performance and also good to decrease load time of a page.

Lazy loading is a process to load images on a page when whenever we scroll down to the page. Instead of loading all images at a time, load images when user go down to the page. Using the concept of lazy loading it reduces the load time of a page which contains many images like an eCommerce website. Whenever user scrolls down the page, images get loaded one by one.

Learn More –

Let’s get started.

Create an Application

Create a folder lazy-load in your localhost directory.

Inside this folder, create a file called index.html.

<!DOCTYPE html>
<html>

<head>
    <title>Lazy Loading Concept in Images Using jQuery Plugin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        .lazy-load-div img {
            width: 302px;
            padding: 12px;
        }
    </style>
</head>

<body>

    <div class="container">
        <h3>Lazy Loading Concept in Images Using jQuery Plugin</h3>
        <div class="row lazy-load-div">

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2022/01/How-To-Read-JSON-File-in-CodeIgniter-4-Tutorial.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/How-To-Create-Zip-File-and-Download-in-Laravel-8.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2022/01/How-To-Read-CSV-File-in-CodeIgniter-4-Tutorial.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/How-To-Check-Date-Is-Weekend-In-JavaScript-Tutorial.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/Laravel-8-Store-Log-Of-Eloquent-SQL-Queries.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/How-to-Override-Auth-Register-Method-in-Laravel-8.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/How-To-Create-Zip-File-and-Download-in-Laravel-8.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2022/01/How-To-Read-CSV-File-in-CodeIgniter-4-Tutorial.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/How-To-Check-Date-Is-Weekend-In-JavaScript-Tutorial.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/Laravel-8-Store-Log-Of-Eloquent-SQL-Queries.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/How-to-Override-Auth-Register-Method-in-Laravel-8.png">
            </div>

            <div class="col-md-8">
                <img data-original="https://onlinewebtutorblog.com/wp-content/uploads/2021/12/How-To-Create-Zip-File-and-Download-in-Laravel-8.png">
            </div>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>

    <script type="text/javascript">
        $(function() {
            $("img").lazyload({
                effect: "fadeIn"
            });
        });
    </script>


</body>

</html>

Inside above code we can see we have put several image tags. In these image tags we don’t have any src atrribute. Instead we have data-original.

We have used a jquery plugin to load images as lazy loading is

https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js

After adding this CDN link, we are able to use the logic –

$(function() {
    $("img").lazyload({
        effect: "fadeIn"
    });
});

Now,

Whenever we scroll down to the page, lazyload plugin takes data-original attribute from each image tag and create a src tag dynamically. You can even load images using any database source.

So, showing images on page scroll will help to improve the performance of any page on website.

Application Testing

Open browser and hit this URL: http://localhost/lazy-load

We hope this article helped you to learn Concept of Lazy Loading Image Using jQuery Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.