How to load a table on a cell by cell basis
<p>I have a simple table with a link and an image in a div in each cell. the simplified code is like:</p>

<pre><code>&lt;td&gt;
    &lt;a href="#"&gt;&lt;/a&gt;
    &lt;div&gt;
        &lt;img src="image01.jpg" /&gt;
    &lt;/div&gt;
&lt;/td&gt;
</code></pre>

<p>I pull the values for the link and the image from a the database and manually generate the table like:</p>

<pre><code>cell = "&lt;td&gt;"
       + "&lt;a href=\"#\"&gt;&lt;/a&gt;&lt;div&gt;"
       + "&lt;img src=\"" + imageName + "\" "
       + "\" alt=\"" + imageName + "\" /&gt;&lt;/div&gt;&lt;/td&gt;";
</code></pre>

<p>When the user hovers the images, another image element is displayed to show a bigger version of the hovered image. This is done with javascript.</p>

<p>To be able to instantly respond to the hover, I actually load the bigger versions of the images in the table. I resize and crop them (hence the parent divs).</p>

<p>Since the table has around 40-100 cells, and the images vary between 180px to 800px width, I decided to load the empty table first, and then refresh the page with each cell content. This way the user will be able to interact with the loaded images, while the rest is still loading.</p>

<p>I think it is possible with an ajax loop that fires upon each page load with a counter set to the total number of cells. But I do not know how it can be done.</p>

<p>Is there a way to load the content of a cell, display it to the user and go on loadind the next cells?</p>

<p>Thank you for your time.</p>
