How can I use progressive enhancement techniques to progressively load a slow page?

Question

I've got a portal page in ASP.NET MVC with a few different sections (partial views), some of which will be unavoidably slow the first time a user accesses them, because they have to pull in up-to-date data from an external internet source.

Some of this data can be loaded almost immediately, but the old "Web 1.0" design just goes to a "loading" page until all of the data is available. I'm trying to improve the user experience by immediately displaying the local data, and then using a couple of ajax updates to display the remote data a few seconds later.

Of course I want to do this using progressive enhancement in case the Javascript breaks, gets blocked, or isn't supported for whatever reason. My first thought was to use a meta refresh and disable it with javascript, but apparently that's impossible. I'm also violently opposed to the idea of a window.location redirect, because (a) it's highly perceptible, unlike a server redirect, and (b) it's well within the realm of possibility for the JS redirect to work but the ajax to still break (think IE6, ill-behaved mobile devices, etc.)

Is there some way I can build up a page that loads in stages, but still works with plain HTML?

Answer 1

I've solved this in the past with a couple of approaches: one is to create separate pages for the slow content, so that users who don't have or don't get JS for some reason can click a link to get the content. The experience is different, but works.

Another way to do it is to have a "show" link in the areas that are deferred. JS removes the link and inserts the content. If the user wants to see the content they click the link, triggering a refresh that will not defer the content.