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: