3

延迟加载许多（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() 显示那些在视口中。但我不知道如何分辨视口中的内容和不存在的内容。

我将不胜感激任何和所有的帮助！

提前致谢！

4

2 回答 2

10

正如您所说，这只是为了效果，这是我不久前发现的一个不错的小解决方案。

假设您的标记是这样的

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

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

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

2）我们设置了两个变量。最小值和最大值（始终相差 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;

}
});

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

编辑：添加加载 DIV

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

JS 小提琴http://jsfiddle.net/ymyx8/3/

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

于 2013-05-29T00:44:06.327 回答
0

上面的示例在某些浏览器/系统（看着你的 Apple）上存在一个错误，如果你没有足够的项目来触发页面滚动（例如 7），则代码不起作用li。由于没有滚动条，代码什么也不做。

这是一个可能的hacky修复......

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

于 2020-08-18T14:59:49.747 回答