Javascript 延迟加载long的最简单方法<；ul>；有很多<；李>；s

延迟加载一个包含许多（65+）列表项的长列表（）的最简单方法是什么

延迟加载的意思是只加载视口中可见的列表项。一旦列表项在视口中可见，则加载它

我看过很多无限滚动和延迟加载插件，但它们似乎都不是一个很长的列表

它们似乎都是一个很长的图像列表，或者是一个带有“上一页”和“下一页”按钮的分页列表

My HTML只是一个文本列表，包含许多列表项，如下所示：

<ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
<ul>

列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

我非常感谢您在编写javascript或jquery时提供的所有帮助，以便只加载当前在视口中的内容，然后隐藏其余内容，然后当用户滚动条和其他内容进入视口中时，加载它们。 如果可能，在加载时显示一个

加载…

我真的不知道如何做的部分是只加载或显示开始时在视口中可见的内容，然后可以使用jQuery的.load（）加载或使用jQuery的.show（）显示视口中的内容。但我不知道如何分辨视口中有什么和没有什么

我将非常感谢任何和所有的帮助

---

提前谢谢

正如您所说，这只是为了效果，这是我刚才找到的一个很好的小解决方案

假设您的标记是这样的

<ul id="yourlist">
<li>list item</li> ... etc

(二) 我们设置了两个变量。最小值和最大值（差值始终为20）。这将加载列表中的下一个20。 然后，它检查窗口滚动，如果窗口高度在页面底部的400 px范围内（如果更改代码，则为div），则它将运行下一个功能，即将最小值切片为最大值，并淡入这些项目。然后，它开始运行，以便为下次运行做好准备

var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#yourlist li").slice(mincount,maxcount).fadeIn(1200);

mincount = mincount+20;
maxcount = maxcount+20;

}
});

这是一个有一些背景颜色的李的，所以你可以看到它加载

编辑：添加加载DIV 正如你在评论中提出的问题：问题是实际上没有什么是“加载”。通常，当您看到这种情况发生时，这是因为进行了AJAX调用，并且在success函数上显示和隐藏了加载。可以使用如下延迟来模拟效果：

---

你也可以在淡出等的回调函数中找到它。

在一些浏览器/系统（看看你的苹果）上，上面的例子有一个bug，如果你没有足够的

li

项来触发页面滚动，那么代码就不起作用（例如7）。因为没有滚动条，所以代码什么也不做

这里可能有一个黑客修复

---

你这样做是为了节省页面加载时间还是为了效果？@james just for effect。但，我希望它不要尽可能地降低页面的重量。是否有一种方法可以在列表底部显示一个div，当下面的项目正在加载时，该div当前可见？div只需要加载文本。。。当其他项目加载时，它是隐藏的。你知道怎么做吗？你的标记有一些问题。1） 在您的脚本标记中，您已显示。2） 您只是在代码中选择UL，而不是LI。使用以下命令：------->$（'#main>ulli'）.slice（6.hide（）；var-minCount=6；var-maxCount=12；$（窗口）.scroll（函数（）{if（$（窗口）.scrollTop（）+$（窗口）.height（）>=$（文档）.height（）-320）{$（'#main>ul li'）.slice（minCount，maxCount）.fadeIn（）；minCount+=6；maxCount+=6；}）；您还可以在fadeIn（）中添加一些毫秒的时间，使其看起来更明显，好像fadeIn（500）将是半秒。是的，我第二次查看代码时发现我缺少结束标记和文档。就绪。我添加了这些，现在它工作了。是的，我同意退色应该延迟得更多。如果你从页面底部降低高度，它的流动性也会更好。也许把-320改成-20。我认为这对你的整个页面来说是一个更好的效果：------>>$（'#main>ulli'）.slice（6.hide（）；var-minCount=6；var-maxCount=12；$（窗口）.scroll（函数（）{if（$（窗口）.scrollTop（）+$（窗口）.height（）>=$（文档）.height（）-20）{$（'#main>ul li'）.slice（minCount，maxCount）.fadeIn（500）；minCount+=6；maxCount+=6；}）；

var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#yourlist li").slice(mincount,maxcount).fadeIn(1200);

mincount = mincount+20;
maxcount = maxcount+20;

}
});