Is there any way I can lazy load li elements on scroll with basic js functions? I found some example which I did not succeed to adjust to my example.
<div class="col-md-12">
<ul class="timeline">
<li class="lazyload">
// content
</li>
< li class="lazyload">
// content
</li>
..etc
</ul>
</div>
I am pretty new with JavaScript and this is my working JS code. Thanks.
$(document).ready(function () {
function lazyload()
{
var wt = $(window).scrollTop(); //* top of the window
var wb = wt + $(window).height(); //* bottom of the window
$(".ads").each(function () {
var ot = $(this).offset().top; //* top of object (i.e. advertising div)
var ob = ot + $(this).height(); //* bottom of object
if (!$(this).attr("loaded") && wt<=ob && wb >= ot) {
$(this).html("lazyload");
$(this).attr("loaded",true);
}
});
}
$(window).scroll(lazyload);
lazyload();
});
How about the following
var mincount = 20;
var maxcount = 40;
$(".image-gallery-ul li").slice(20).hide();
$(".image-gallery-list").scroll(function() {
if($(".image-gallery-list").scrollTop() + $(".image-gallery-list").height() >= $(".image-gallery-list")[0].scrollHeight) {
$(".image-gallery-ul li").slice(mincount,maxcount).fadeIn(1000);
mincount = mincount+20;
maxcount = maxcount+20;
}
});