How to lazyload a standard html table that has many rows?
17:23 24 Sep 2012

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:

        
PhotoViewer v1.6

Photos

--Photo-- --Label-- --Path--

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);
          }
          */
      });
  });
c# javascript asp.net html lazy-loading