编辑：添加加载DIV

Question

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

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

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

它们似乎都是一个很长的图像列表，或者是一个与前一个和下一个按钮分页的列表。

我的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的任何和所有帮助，以便只加载当前在视口中的那些，然后隐藏休息，然后当用户滚动并且其他人在视口中进入视图时，他们已加载。并且，如果可能的话，在加载时显示<div>loading...</div>。

我真的不知道怎么做的部分是加载或只显示开头的视口中可见的内容然后可以使用jQuery的.load（）或show来加载jQuery的.show（）视口中的那些。但是我不知道如何分辨视口中的内容以及什么不是。

我非常感谢任何帮助！

提前致谢！

Answer 1

正如你所说，这只是效果，这是我刚才发现的一个很好的小解决方案。

让我们假设你的标记是这样的

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

1）切割前20个元素并隐藏其余元素。

$("#yourlist li").slice(20).hide();

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

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;

}
});

这是一个JS FIDDLE OF IT WORKING http://jsfiddle.net/ymyx8/1/，在li上有一些背景颜色，所以你可以看到它正在加载

编辑：添加加载DIV

根据你在评论中提出的问题：问题是没有任何东西实际上是“加载”。通常，当您看到这种情况发生时，因为进行了AJAX调用并且在成功函数上显示并隐藏了加载。可以使用如下延迟来模仿效果：

JS FIDDLE http://jsfiddle.net/ymyx8/3/

你也可以在fadeOut等的回调函数上使用它。

Answer 2

上面的示例在某些浏览器/系统（看着您的Apple）上存在一个错误，如果您没有足够的li项来触发页面滚动（例如， 7）由于没有滚动条，因此代码不执行任何操作。

这是一个可能是hacky 修复程序...

http://jsfiddle.net/7meuchoy/6/

延迟加载long <ul>的最简单方法是<li> s </li> </ul>

2 个答案:

编辑：添加加载DIV