如何延迟加载具有多行的标准html表？

我选择使用标准的HTML方式制作表格和行等，而不是使用其他人的表插件。我会从数据库中获取数据以填充行。 但是当行数超过10,000时，我意识到我需要lazy_load行，否则网站会非常慢。 我已经找到了延迟加载表行的方法，但我似乎无法在任何地方找到它，所以我的问题只是lazyloading插件或行甚至存在 ？

希望有些大师可以回答这个问题。 提前致谢！

关于我正在尝试做什么的背景：我在html代码中创建表的粗略草图，然后在运行时，当用户搜索特定的东西时，我将通过DOM向表中添加行。 当他们搜索它时，会有数千个结果，我想将结果延迟到表中。

jQuery为图像和图像容器提供了延迟加载。

其他一些插件允许延迟加载div。

然而，表行的延迟加载似乎是不存在的。

上下文的一些示例代码：

HTML：

 
PhotoViewer v1.6
 
Photos
 
 
 
--Photo--
 
--Label--
 
--Path--
 
 
 
  

寻找一些代码，它们将允许与下面的代码行相同的function。

使用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); } */ }); }); 

Answer 1

由于一个简单的原因，DOM中有数千行数据是一个糟糕的想法： DOM很慢 。

相反，只渲染需要可见的行。 当一行不在视图中时， 将其从DOM中删除 。

我最喜欢的用于显示数据网格的库是SlickGrid 。 通过仅为视口中的数据呈现DOM元素， 它可以有效地显示无限量的数据，并具有惊人的性能。 （那个例子显示了50万行！）

还有更多示例展示了SlickGrid的function，但您会对AJAX加载示例特别感兴趣，在滚动时从服务器流式传输小块行。

Answer 2

我没有听说过可以做这样的事情的插件，但我主要是避免使用花哨的JS“库”。 从概念上讲，你可以使用AJAX请求来选择例如m> id> n的图像，然后在你的javascript中加载更多图像，做另一个ajax请求，但是例如将m和n增加100。

很多开源库框架都存在这个原理，但通常它们使用php生成页面，而不是使用AJAX动态改变内部html。

以下是如何从AJAX和JS中获取数据库数据。 http://www.w3schools.com/ajax/ajax_database.asp