How to Display HTML to the Browser Incrementally Over a Long Period of Time

How to display HTML to the browser incrementally over a long period of time?

Long polling is a common technique to do something like this; to briefly summarise, it works as follows:

The client sends an XHR to the server.
- If there is data ready, the server returns this immediately.
- If not, the server keeps the connection open until data does become available, then it returns this.
- If the request times-out, go back to 1).
The page running on the client receives this data, and does what it does with it.
Go back to 1)

This is how Facebook implements its chat feature.

This article also clears up some of the misconceptions of long-polling, and details some of the benefits of doing so.

Can I display a slow-loading web page incrementally?

It looks like Rails Live Streaming is one approach. Disadvantage is that it appears to be highly web server dependent and touchy. Here's a tutorial:

http://tenderlovemaking.com/2012/07/30/is-it-live.html

class MyController < ActionController::Base
  include ActionController::Live

  def index
    100.times {
      response.stream.write "hello world\n"
    }
    response.stream.close
  end
end

When do browsers start to render partially transmitted HTML?

--- Post-clarification Answer ---

My original answer should be useful to someone (I hope), but it isn't a direct response to the question, so I'll post another answer

The answer to your restated question is "no". In the case of FF, there is a predefined initial render delay, but other browsers will be different. That FF render delay can be tweaked as well.

Using FF as an example, those initial 250ms are time for FF to find out at least some useful information before attempting the first render. It then does additional renders periodically as it learns more.

There is no way for you to determine when the browser has started to render the HTML document.

--- Original Answer ---

To directly answer your question, I believe Firefox waits 250ms before acting on the first data received, but that can be changed. For other browsers, I don't know.

However, you don't want to go that route.

When jQuery is ready to work its magic, it'll let you know by firing $(document).ready(). Before then, any attempt to use jQuery will fail. In other words, your spinner isn't showing up because jQuery isn't ready to process that request yet.

Consider the following example, where two placeholders are shown on-screen, and we'll use jQuery to hide them.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script>

            // We're not ready yet.  This will fail.
            $(".placeholder").hide();

            $(document).ready(function(){
                // This won't fail
                $("#one").hide();
            });

        </script>
    </head>
    <body>
        <div id="one" class="placeholder">Placeholder One</div>
        <div id="two" class="placeholder">Placeholder Two</div>
    </body>
</html>

It may appear at first that $("#one").hide(); is redundant, but that's not true. $(".placeholder").hide(); is called before jQuery is ready, so it has no effect, which is why you'll see "Placeholder Two" displayed (and not "Placeholder One") if you run the markup above in a web browser.

Now that we have that out of the way, the solution to the larger problem (the "right way") is AJAX.

Load a base page that contains the spinner code. Make sure the code to load the spinner runs as part of $(document).ready().
Use jQuery's AJAX functionality to get the report you want.
When it comes back, hide the spinner, inject the report into your base page.

Good luck!

Simplest way to implement backend server for multiplayer JavaScript game? (COMET/longpolling)

I think http://nitrogenproject.com/ have a good comet example here http://nitrogenproject.com/web/samples/comet2

Increment a var by one every 24 hours from a specific date

You have to create two date objects, one representing your initial date, and another one representing right now. Then, calculate the difference:

// Calculate days since Dec 1st 2012
var initialDate = new Date(2012, 11, 1); // Attention: month is zero-based
var now = Date.now();
var difference = now - initialDate;
var millisecondsPerDay = 24 * 60 * 60 * 1000;
var daysSince = Math.floor(difference / millisecondsPerDay);
alert(daysSince); // 80

http://jsfiddle.net/PmYFc/

How to use CSS counter increment for dynamic page numbers

So I was never able to get this to work for my case. I know other cases may work with above answers, but I could not get the Front-End alone to generate the dynamic page numbers.

I used help from my back-end, which is PHP in my case and used a plugin called wkhtmltopdf.

This solved my issue, https://stackoverflow.com/a/13496899/6000966.

I was able to remove the logic from the front-end and place it on the back-end and let it handle the dynamic page numbers.

I would advise if the HTML pages are using dynamic data from the back-end, something like this is the way to go.

Static pages on the other hand should work with the above answers.

How to Display HTML to the Browser Incrementally Over a Long Period of Time