Is it possible to modify a web page as it's loading?

Question

I have a Perl script that generates a web page. It takes a non-trivial amount of time to run. I would like to be able to render a complete HTML table to the user so they know what results to expect, but fill in the details slowly as the Perl script generates them.

What approach should I be taking here?

My initial assumption was that I would be able to assign an ID to my various table data elements and then adjust their innerHTML properties as and when I got the results in. But it doesn't seem like I can perform such manipulations whilst the page is still loading.

Answer 1

There's no consistantly reliable way to modify a web page as it's loading.

You can create the effect by initially loading a compact loading page, and then loading the rest of the content via AJAX calls back to the server to get the individual components.

You can then load those components as your AJAX calls are completed.

EDIT

As the comments have pointed out...while this would achieve the results you want, it's a terrible idea.

Search Engine Indexing being the primary reason. You're also relying on Javascript to do a lot of heavy lifting...and it might not always be enabled.

Answer 2

One solution would be to progressively load the data via AJAX. You would need to do something like this:

• Load the webpage
  1. Using javascript, query the webserver for table values
  2. Populate table with received values
  3. Loop until table filled

Obviously this solution presents problems if the data is meant to be crawled. Since crawlers don't take into account dynamic data via javascript.

The other issue to consider is usability. Web Users are not used to this type of progressive loading, so informing them that the data is still being loaded would be very important. Also some type of accurate progress bar would provide good usability.

Answer 3

As suggested, AJAX is probably the way to go.

Create a basic HTML page with an empty div to hold your data, then using repeating AJAX calls, fill in the div.

This page describes how to do this: link text