5

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

希望有高手能解答一下。提前致谢！

关于我正在尝试做的事情的背景：我正在 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);
          }
          */
      });
  });
4

2 回答 2

7

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

相反，只呈现需要可见的行。当一行消失时，将其从 DOM 中移除。

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

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

于 2012-09-24T22:49:51.980 回答
0

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

存在许多基于此原理运行的开源图库框架，但通常它们使用 php 生成页面，而不是使用 AJAX 动态更改内部 html。

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

于 2012-09-24T22:26:30.757 回答