Skip to content
Related Articles

Related Articles

Improve Article
How to design lazy loading of images/videos for mobiles using jQuery Plugin?
  • Last Updated : 14 Oct, 2020

In this article, we will learn to design the loading of images or videos for mobile-oriented applications using the jQuery Lazy Load XT plugin.

Prerequisite: Download the pre-compiled required library files from the link and save it in your working folder for the following implementation.

Example 1: The following example demonstrates the ajax loading of images using HTML and the above jQuery plugin.

HTML




<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
  
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"/>
        <link href="bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="style.css" />
        <script src="jquery.js"></script>
        <script src="jquery.lazyloadxt.js"></script>
        <script>
            $(window).on("ajaxComplete", function () {
                setTimeout(function () {
                    $(window).lazyLoadXT();
                }, 50);
            });
        </script>
        <style>
            body {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <p class="lead">Images loading using AJAX</p>
  
            </div>
              
<p>
                <a class="btn btn-primary btn-lg"
                   role="button"
                   href="#"
                   onclick="$('#divID').load('myajax.htm #divID');
                            return false;">
                    Reload
                </a>
            </p>
  
            <div id="divID">
                  
<p><img data-src="images/geeksimage1.PNG" 
                        width="400" height="265" />
                </p>
  
  
                  
<p><img data-src="images/gfg2.JPG" 
                        width="400" height="265" />
                </p>
  
  
                  
<p><img data-src="images/gfg4.JPG" 
                        width="400" height="265" />
                </p>
  
  
                  
<p><img data-src="images/gfg6.PNG" 
                        width="400" height="265" />
                </p>
  
  
                  
<p><img data-src="images/background2.JPG"
                        width="400" height="265" />
                </p>
  
  
                  
<p><img data-src="images/background3.JPG" 
                        width="400" height="265" />
                </p>
  
            </div>
        </div>
    </body>
</html>

Output: 
 



 Example 2: The below example demonstrates the infinite scrolling for the images list using the plugin.

html




<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Infinite scroll</title>
        <meta name="viewport"
              content=" width=device-width, initial-scale=1.0"/>
        <link href="bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="style.css" />
        <script src="jquery.js"></script>
        <script src="jquery.lazyloadxt.js"></script>
        <style>
            #marker-end {
                height: 30px;
                background: url(images/loading.gif) no-repeat 50% 50%;
            }
        </style>
        <script>
            $(document).ready(function () {
                if (!$.lazyLoadXT.forceLoad) {
                    $("#marker-end")
                        .on("lazyshow", function () {
                            $.ajax({
                                url: "myinfinite.htm",
                                dataType: "html",
                            }).done(function (responseText) {
                                
                                // Add new elements
                                $("#divID").append($("<div>").append($.parseHTML(responseText))
                                                   .find("#infinite").children());
                                // Process added elements
                                $(window).lazyLoadXT();
                                $("#marker-end").lazyLoadXT({
                                    visibleOnly: false,
                                    checkDuplicates: false,
                                });
                            });
                        })
                        .lazyLoadXT({ visibleOnly: false });
                }
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <p class="lead">Infinite scrolling.</p>
  
            </div>
            <div id="divID">
                  
<p><img data-src="images/geeksimage1.PNG" 
                        width="400" height="265" /></p>
  
  
                  
<p><img data-src="images/gfg2.JPG" 
                        width="400" height="265" /></p>
  
  
                  
<p><img data-src="images/gfg4.JPG" 
                        width="400" height="265" /></p>
  
  
                  
<p><img data-src="images/gfg6.PNG" 
                        width="400" height="265" /></p>
  
  
                  
<p><img data-src="images/background2.JPG" 
                        width="400" height="265" /></p>
  
  
                  
<p><img data-src="images/background3.JPG" 
                        width="400" height="265" /></p>
  
            </div>
            <div id="marker-end"></div>
        </div>
    </body>
</html>

Output: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :