javascript 如何惰性加载一个有很多行的标准html表格？

4smxwvx5 于 2023-02-11 发布在 Java

关注(0)|答案(3)|浏览(110)

我没有使用其他人的表格插件，而是选择用标准的HTML方式来制作表格和行等。我会从数据库中提取数据来填充行。但是当行数超过10，000时，我意识到我需要lazy_load这些行，否则网站会非常慢。我一直在寻找方法来lazy_load表格的行。但是我似乎在任何地方都找不到它，所以我的问题很简单：行甚至的lazyloading插件或是否存在？
希望有大师能回答这个问题。提前感谢!
我想做的事情的背景：我在html代码中创建表的粗略草图，然后在运行时，当用户搜索特定的东西时，我会通过DOM向表中添加行，当他们搜索时，会有成千上万的结果，我想将结果延迟加载到表中。
jQuery为图像和图像容器提供了惰性加载。
其他一些插件允许延迟加载div。
然而，表行的延迟加载似乎并不存在。

上下文的一些示例代码：

超文本：

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

JavaScript

来源：https://stackoverflow.com/questions/12573722/how-to-lazyload-a-standard-html-table-that-has-many-rows

3条答案

按热度按时间

0md85ypi1#

在DOM中拥有数千行数据是一个糟糕的想法，原因很简单：DOM很慢。
相反，只呈现 * 需要 * 可见的行。当一行从视图中消失时，从DOM中 * 删除它 *。
我最喜欢的用于显示数据网格的库是SlickGrid，it can display effectively unlimited amounts data只为视口中的数据呈现DOM元素，性能惊人（该示例显示了 * 50万 * 行！）
还有更多examples可以展示SlickGrid的特性，但您会对AJAX loading example特别感兴趣，在AJAX loading example中，当您滚动时，会从服务器流出小块的行。

赞(0）回复(0）举报 2023-02-11

carvr3hs2#

我还没有听说过一个插件可以做这样的事情，但我大多避免花哨的JS“库”.这是从概念上说，你可以使用一个 AJAX 请求来选择例如图像，其中m〉id〉n，然后在你的javascript中，当你想加载更多的图像，做另一个ajax请求，但增加m和n，例如100.
许多开源图库框架都是基于这个原则运行的，但是通常它们使用php生成页面，而不是使用 AJAX 动态地改变内部html。
下面是如何将数据库数据从 AJAX 中取出并放入JS.http://www.w3schools.com/ajax/ajax_database.asp

赞(0）回复(0）举报 2023-02-11

cwxwcias3#

延迟加载表的一种简单方法是在表首次填充时使所有<tr>元素都设置了display: none，然后仅在最后一个可见行位于视口的n个屏幕内时加载更多行：

let bufferRows = 200;

function lazyLoadNext(numRows) {
    numRows = Math.min(numRows, tableBody.childNodes.length);

    let rowsLoaded = 0;
    for (let i = 0; i < tableBody.childNodes.length; i++) {
        if (tableBody.childNodes[i].style.display != "none")
            continue;

        tableBody.childNodes[i].style = "";

        rowsLoaded++;
        if (rowsLoaded >= numRows)
            break;
    }
}

function lazyLoadBuffer() {
    for (let i = tableBody.childNodes.length - 1; i >= 0; i--) {
        if (tableBody.childNodes[i].style.display == "none")
            continue;

        let rect = tableBody.childNodes[i].getBoundingClientRect();
        let viewHeight = window.innerHeight || document.documentElement.clientHeight;

        // If we are within 3 screens of the viewport, lazy load more rows
        if (rect.bottom <= viewHeight * 3) {
            console.log(`Lazy loading ${bufferRows} more rows...`)
            lazyLoadNext(bufferRows);
        }

        break;
    }
}

lazyLoadNext(bufferRows);
window.onscroll = lazyLoadBuffer; // optionally debounce

示例JSFiddle：https://jsfiddle.net/0hgtmjk4/1/

赞(0）回复(0）举报 2023-02-11

我来回答

javascript 如何惰性加载一个有很多行的标准html表格？

3条答案

相关问题

热门标签

最新问答