如何延迟加载一个有很多行的标准html表？

Question

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

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

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

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

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

然而,表行的延迟加载似乎是不存在的.

上下文的一些示例代码:

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>

寻找一些代码,它们将允许与下面的代码行相同的功能.

使用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的功能,但您会对AJAX加载示例特别感兴趣,在滚动时从服务器流式传输小块行.