javascript 如何延迟加载具有多行的标准 html 表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12573722/
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
How to lazyload a standard html table that has many rows?
提问by Charles
Instead of using a table plugin by someone else, I choose to do it the standard HTML way of making Tables and rows etc etc. I would fetch data from a database to fill the rows. But when the number of rows exceeded 10,000, I realized I needed to lazy_load the rows otherwise the website would be incredibly slow. I've looked for ways to lazy load rows of a table, but I can't seem to find it anywhere, so my question is simply does the lazyloading plug-inor for rowseven exist?
我没有使用其他人的表格插件，而是选择使用标准的 HTML 方式制作表格和行等。我将从数据库中获取数据以填充行。但是当行数超过 10,000 时，我意识到我需要延迟加载行，否则网站会非常慢。我就开始寻找一个表的延迟加载行，但我似乎无法找到任何地方，所以我的问题是简单地做了惰性加载插件或用于行甚至存在？
Hope some guru can answer this. Thanks in advance!
希望有大师能解答一下。提前致谢！
Background as to what I'm trying to do: I'm creating the rough sketch of the table in the html code, then during runtime, I will add rows to the table through DOM when the user searches for particular things. When they search it, there will be thousands of results, and I want to lazyload the result into the table.
关于我要做什么的背景：我在 html 代码中创建表格的粗略草图，然后在运行时，当用户搜索特定内容时，我将通过 DOM 向表格添加行。当他们搜索它时，会有数千个结果，我想将结果延迟加载到表中。
jQuery provides lazyload for images and containers of images.
jQuery 为图像和图像容器提供延迟加载。
Some other plug-ins allowed for lazyloading of divs.
其他一些插件允许延迟加载 div。
Lazyloading for table rows however seemed to be non-existant.
然而，表行的延迟加载似乎不存在。
Some sample code for context:
上下文的一些示例代码：
HTML:
HTML：
<fieldset>
<legend>PhotoViewer v1.6</legend>
<h4 id = "albumName"><i>Photos</i></h4>
<table cellspacing="1" border="2" id = "photoTable" class = "lazyProgressiveLoad">
<tr style="font-style: italic; font-size: small; font-family: Segoe UI Light; color: Red">
<th>--Photo--</th>
<th>--Label--</th>
<th>--Path--</th>
<th><input type="button" value="Add Photo" onclick="addPhoto()" id = "addPhoto"/></th>
</tr>
</table>
</fieldset>
Looking for some code that will allow the same functionality as the code below for table rows.
寻找一些代码，这些代码将允许与下面的表行代码具有相同的功能。
Javascript:
Javascript：
$(function() {
$("img").lazyload({
effect : "fadeIn"
/*
,appear : function(elements_left, settings) {
console.log("appear");
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load : function(elements_left, settings) {
console.log("load");
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
});
回答by josh3736
Having thousands of rows of data in the DOM is an awful idea for one simple reason: the DOM is slow.
在 DOM 中拥有数千行数据是一个糟糕的想法，原因很简单：DOM 很慢。
Instead, only render the rows that needto be visible. When a row goes out of view, remove itfrom the DOM.
相反，只呈现需要可见的行。当一行不在视图中时，将其从 DOM 中删除。
My favorite library for displaying a grid of data is SlickGrid. By only rendering DOM elements for the data in the viewport, it can display effectively unlimited amounts datawith astounding performance. (That example displays a half-millionrows!)
我最喜欢的用于显示数据网格的库是SlickGrid。通过只为视口中的数据渲染 DOM 元素，它可以以惊人的性能有效地显示无限量的数据。（该示例显示了50 万行！）
There are more examplesthat show off SlickGrid's features, but you'll be especially interested in the AJAX loading example, where small chunks of rows are streamed from the server as you scroll.
还有更多展示 SlickGrid 功能的示例，但您会对AJAX 加载示例特别感兴趣，其中在您滚动时从服务器流式传输小块行。
回答by awiebe
I haven't heard of a plugin that can do something like this, but I mostly avoid fancy JS "libraries". That being said conceptually, you can use an AJAX request to select for example images where m>id>n, then in your javascript when you want to load more images, do another ajax request, but increment m and n by 100 for example.
我还没有听说过可以做这样的事情的插件，但我主要避免花哨的 JS“库”。从概念上说，您可以使用 AJAX 请求来选择例如 m>id>n 的图像，然后在您的 javascript 中，当您想要加载更多图像时，执行另一个 ajax 请求，但将 m 和 n 增加 100，例如。
Lots of open source gallery frameworks exist that operate on this principle, but usually, they generate the page using php, instead of dynamically altering the inner html using AJAX.
许多开源图库框架都按照这个原则运行，但通常，它们使用 php 生成页面，而不是使用 AJAX 动态更改内部 html。
Here is how to get database data out of AJAX and into JS. http://www.w3schools.com/ajax/ajax_database.asp
下面是如何从 AJAX 中获取数据库数据并进入 JS。 http://www.w3schools.com/ajax/ajax_database.asp
