javascript - JavaScript - 延迟加载
问题描述
有什么方法可以使用基本的 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;
}
});
推荐阅读
- php - 如何绕过 PHP 连接中的错误 111 MySQL?
- r - 是否有一个 R 函数可以在某个字符串之后移动数据?
- python - azure keyvault 和 azure identity 共存
- html - Namecheap DNS & Xampp Webserver - 重定向
- unit-testing - Redux saga 选择器单元测试问题
- terraform - 带有可选值的 Yamldecode
- java - 当您更改 xml 文件中的属性时,会调用哪个自定义视图的构造函数?
- php - 通过 nginx/laravel API 调用登录尝试失败
- r - 如何修复在 Shiny 中未弹出 esquisserUI 的过滤器选项?
- javascript - 下一个 js:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义