How to design lazy loading of images/videos for mobiles using jQuery Plugin?
Last Updated : 23 Jul, 2024
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: