How to design lazy loading of images/videos for mobiles using jQuery Plugin?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 
 



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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 
 

 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.