如何lazyload有许多行一个标准的HTML表?(How to lazyload a standa

2019-07-31 21:31发布

相反,使用表插件别人的,我选择做它使表和行等等等等,我会从数据库中提取数据,以填补行的标准HTML方式。 但是,当行数突破1万,我意识到我需要lazy_load行,否则本网站将是慢得令人难以置信。 我就开始寻找一个表的延迟加载行,但我似乎无法找到任何地方,所以我的问题是根本的惰性加载插件 或行甚至存在吗?

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

背景为我想要做的事:我在HTML代码中创建表的草图,然后在运行时,我将通过DOM行添加到表时,对特定事物的用户搜索。 当他们搜寻它,就会有成千上万的结果,我想结果lazyload到表中。

jQuery提供为图像和图像的容器lazyload。

允许的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元素在视口中, 它可以显示有效的无限量数据以惊人的表现。 (这个例子显示了半百万行!)

还有更多的例子炫耀SlickGrid的功能,但你会在特别感兴趣AJAX装载例如 ,中行的小块从服务器为您滚动流。



Answer 2:

我没有听说过一个插件,可以做这样的事情,但我主要是忌花哨JS“库”。 这在概念说,你可以使用AJAX请求来选择,例如图像,其中m> ID> n,则在当你要加载更多的图像,另做Ajax请求你的JavaScript,但增量m和n 100为例子。

开源库框架的大量存在,在这个原则进行操作,但通常情况下,他们使用的,而不是动态改变使用AJAX内部HTML PHP,生成页面。

这里是如何让数据库的数据进行AJAX,进入JS。 http://www.w3schools.com/ajax/ajax_database.asp



文章来源: How to lazyload a standard html table that has many rows?