如何lazyload有许多行一个标准的HTML表格？ [英] How to lazyload a standard html table that has many rows?

问题描述

而不是使用表格插件别人的，我选择这样做使得表和行等等等等我会从数据库中获取的数据来填充行的标准HTML方式。但是，当行数突破1万，我才意识到我需要lazy_load行，否则本网站将是令人难以置信的慢。我就开始寻找一个表中的延迟加载行，但我似乎无法在任何地方找到它，所以我的问题很简单的是否惰性加载插件或作为行均匀存在？

希望有大师可以回答这个问题。在此先感谢！

  

背景为我想要做的事情：我创建了草图
  在html code中的表，然后在运行时，我将行添加到
  通过DOM表，当用户搜索特定的东西。
  当他们搜寻它，会有成千上万的结果，我想
  lazyload结果到表中。

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

允许div的惰性加载一些其他插件。

惰性加载为表中的行但似乎是不存在的。

有些样品code上下文：的

HTML

 ＆LT;＆字段集GT;
        ＆LT;传奇＆GT; PhotoViewer V1.6＆LT; /传说＆GT;
        ＆LT; H4 ID =ALBUMNAME＆GT;＆LT; I＆GT;图片＆LT; / I＆GT;＆LT; / H4＆GT;
        ＆LT;表CELLSPACING =1BORDER =2ID =photoTable级=lazyProgressiveLoad＆GT;
            ＆LT; TR风格=字体样式：斜体;字体大小：小; FONT-FAMILY：UI濑越轻;颜色：红色＆GT;
                ＆LT;第i  - 图片 - ＆LT; /第i
                ＆LT;第i  - 标签 - ＆LT; /第i
                ＆LT;第i  - 路径 - ＆LT; /第i
                百分位＆GT;＆LT;输入类型=按钮值=添加照片的onclick =addPhoto（）ID =addPhoto/＆GT;＆LT; /第i
            ＆LT; / TR＆GT;
        ＆LT; /表＆gt;
    ＆LT; /字段集＆GT;
 

  

寻找一些code，使相同的功能如下code
  为表行。

使用Javascript：

  $（函数（）{
      $（img目录）。lazyload（{
          大意是：淡入
          / *
          ，出现：功能（elements_left，设置）{
              的console.log（显示）;
              的console.log（elements_left）;
              //console.log(this，elements_left，设置）;
          }，
          载：函数（elements_left，设置）{
              的console.log（负荷）;
              的console.log（elements_left）;
              //console.log(this，elements_left，设置）;
          }
          * /
      }）;
  }）;
 

解决方案

有数千行数据在DOM是一个简单的原因一个可怕的念头：的DOM是慢

相反，仅呈现行需要的是可见的。当行出去看，的从DOM中删除的

我最喜欢的显示数据网格库 SlickGrid 。通过只渲染数据的DOM元素在视口中，它可以显示有效的无限量数据以惊人的表现。 （这个例子显示的五十万的行！）

有更多例子炫耀SlickGrid的功能，但你会在<一个特别感兴趣HREF =htt​​ps://github.com/mleibman/SlickGrid/blob/master/examples/example6-ajax-loading.html> AJAX加载示例，其中行小块从服务器传输为你滚动。

Instead of using a table plugin by someone else, I choose to do it the standard HTML way of making Tables and rows etc etc. I would fetch data from a database to fill the rows. But when the number of rows exceeded 10,000, I realized I needed to lazy_load the rows otherwise the website would be incredibly slow. I've looked for ways to lazy load rows of a table, but I can't seem to find it anywhere, so my question is simply does the lazyloading plug-in or for rows even exist?

Hope some guru can answer this. Thanks in advance!

Background as to what I'm trying to do: I'm creating the rough sketch of the table in the html code, then during runtime, I will add rows to the table through DOM when the user searches for particular things. When they search it, there will be thousands of results, and I want to lazyload the result into the table.

jQuery provides lazyload for images and containers of images.

Some other plug-ins allowed for lazyloading of divs.

Lazyloading for table rows however seemed to be non-existant.

Some sample code for context:

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>

Looking for some code that will allow the same functionality as the code below for table rows.

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

解决方案

Having thousands of rows of data in the DOM is an awful idea for one simple reason: the DOM is slow.

Instead, only render the rows that need to be visible. When a row goes out of view, remove it from the DOM.

My favorite library for displaying a grid of data is SlickGrid. By only rendering DOM elements for the data in the viewport, it can display effectively unlimited amounts data with astounding performance. (That example displays a half-million rows!)

There are more examples that show off SlickGrid's features, but you'll be especially interested in the AJAX loading example, where small chunks of rows are streamed from the server as you scroll.

这篇关于如何lazyload有许多行一个标准的HTML表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！