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