javascript 使用许多 <li> 延迟加载长 <ul> 的最简单方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16803546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
simplest way to lazy load long <ul> with many <li>s
提问by irfan mir
What is the simplest way to lazy load a long list ( ) of many (65+) list items?
延迟加载许多（65+）个列表项的长列表（）的最简单方法是什么？
By lazy load I mean only load the list items that are visible in the viewport. Once a list item is visible in the viewport then load it.
延迟加载我的意思是只加载在视口中可见的列表项。一旦列表项在视口中可见，然后加载它。
I've looked at many infinite scrolling and lazy load plugins, but none of them seem to be just for a really long list.
我看过许多无限滚动和延迟加载插件，但它们似乎都不是很长的列表。
They all seems to be for a really long list of images, or a list that has pagination with previous and next buttons.
它们似乎都是用于一个非常长的图像列表，或者一个带有上一个和下一个按钮的分页列表。
My HTML is just a list of text with many list items like so:
我的 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>
I would greatly appreciate any and all help in writing the javascript or jquery so that only those that are currently in the viewport are loaded and then rest are hidden and then when teh user scrolls and others come into view in the viewport, they are loaded.
And, if possible, display a <div>loading...</div>while those are loading.
我将不胜感激编写 javascript 或 jquery 的任何和所有帮助，以便仅加载当前在视口中的那些，然后隐藏其余部分，然后当用户滚动和其他人在视口中进入视图时，它们被加载。并且，如果可能，显示<div>loading...</div>一些正在加载的内容。
The part that I really do not know how to do is to load or show only what is visible in the viewport in the beginning and then one could load, with jQuery's .load(), or show, with jQuery's .show() those that are in the viewport. But I don't know how to tell what is in the viewport and what is not.
我真的不知道该怎么做的部分是在开始时只加载或显示视口中可见的内容，然后可以使用 jQuery 的 .load() 加载或显示，使用 jQuery 的 .show() 那些在视口中。但我不知道如何分辨视口中什么是什么，什么不是。
I would greatly appreciate any and all help with this!
我将不胜感激！
Thanks in Advance!
提前致谢！
回答by James
As you've said this is just for effect here is a nice little solution I found a while ago.
正如您所说，这只是为了效果，这是我不久前找到的一个不错的小解决方案。
Let's assume your markup is like this
让我们假设你的标记是这样的
<ul id="yourlist">
<li>list item</li> ... etc
1) Slice the first twenty elements and hide the rest.
1) 将前二十个元素切片并隐藏其余元素。
$("#yourlist li").slice(20).hide();
2) We set two variables. Min and Max (the difference being 20 at all times). This will load the next 20 in the list. It then checks for window scroll and if the window height comes within 400 px of the bottom of the page (or div if you change the code) then it will run the next function which is to slice the min to max and fadeIn those items. Then it counts on so that it's ready to run the next time.
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;
}
});
Here is a JS FIDDLE OF IT WORKING http://jsfiddle.net/ymyx8/1/with some background colours on the li's so you can see it loading
这是一个JS FIDDLE OF IT WORKING http://jsfiddle.net/ymyx8/1/在 li 上有一些背景颜色，所以你可以看到它正在加载
Edit: to add loading DIV
编辑：添加加载DIV
As per your question in the comments: The issue is that nothing is actually 'loading'. Usually when you see this occurring it's because an AJAX call is made and the loading is shown and hidden on the success function. The effect can be mimicked using a delay like so:
根据您在评论中的问题：问题是实际上没有任何东西在“加载”。通常，当您看到这种情况发生时，是因为进行了 AJAX 调用并且加载显示和隐藏在成功函数上。可以使用像这样的延迟来模仿效果：
JS FIDDLE http://jsfiddle.net/ymyx8/3/
JS 小提琴http://jsfiddle.net/ymyx8/3/
You could also to it on callback functions on the fadeOut etc.
你也可以在fadeOut等的回调函数上使用它。
