懒惰加载的简单方法 有很多 s

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（）加载或使用jQuery的.show（）进行显示。那些在视口中。但我不知道如何分辨视口中有什么，无视。

我将非常感谢您提供的所有帮助！

预先感谢！

Answer 1

正如您所说的，这只是出于效果，这是我前一段时间找到的一个不错的小解决方案。

假设您的标记是这样的

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

1）切片前二十个元素并隐藏其余元素。

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

2）我们设置两个变量。最小值和最大值（两者始终相差20）。这将加载列表中的下20个。然后，它检查窗口滚动，如果窗口高度位于页面底部的400像素之内（如果更改代码，则为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;

}
});

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

编辑：添加加载的DIV

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

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

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