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