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
<!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/Beginnerimage1.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/Beginnerimage1.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:
Contact Us