JavaScript - 延迟加载 <li> 元素
JavaScript - lazy load <li> element
有什么方法可以使用基本的 js 函数在滚动条上延迟加载 li 元素吗?
我找到了一些我没有成功调整到我的例子的例子。
<div class="col-md-12">
<ul class="timeline">
<li class="lazyload">
// content
</li>
< li class="lazyload">
// content
</li>
..etc
</ul>
</div>
我是 JavaScript 的新手,这是我的工作 JS 代码。
谢谢
$(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();
});
下面的怎么样
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;
}
});
有什么方法可以使用基本的 js 函数在滚动条上延迟加载 li 元素吗? 我找到了一些我没有成功调整到我的例子的例子。
<div class="col-md-12">
<ul class="timeline">
<li class="lazyload">
// content
</li>
< li class="lazyload">
// content
</li>
..etc
</ul>
</div>
我是 JavaScript 的新手,这是我的工作 JS 代码。 谢谢
$(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();
});
下面的怎么样
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;
}
});