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