CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcajax
Aaronaught
Aaronaught

Reputation: 122654

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

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?

Upvotes: 7

Views: 764

Answers (4)

singpolyma
singpolyma

Reputation: 11241

If you absolutely must all-or-nothing render the page, you can have a "reload this page in a minute to see the rest of the content" message/link.

Otherwise "frames" (using ) or separate pages are a pretty good plan.

Upvotes: 0

ysaw
ysaw

Reputation: 203

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.

Upvotes: 2

alanning
alanning

Reputation: 5217

As Ali points out in his comment, using iframes for the slow-loading content seems like the way to go.

If your ajax routines do more than just load the content (for example if you are reformatting the data in some way) you can go one step further and use javascript to remove the iframe on load, then use your normal ajax routines to load the content as you wish.

So users with javascript disabled still see the content but your local content loads quickly, while users with javascript enabled will have a nice ajax experience.

To remove the iframe using jquery you can do something like this:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  <head>
  <body>
    <div>Fast Loading Content...</div>

    <iframe id="slowContent" src="http://example.com/slowLoadingContent.htm"></iframe>

    <script type="text/javascript">
      $('#slowContent').remove();   // removes both the iframe and any bound events

      // execute your ajax routines to pull in the slowLoadingContent and modify as appropriate
    </script>
  </body>
</html>

Upvotes: 1

centralscru
centralscru

Reputation: 6690

I suppose this depends on the nature of the data that you're pulling in, but "progressive enhancement" in this case might be serving the page without the external content to clients who don't have javascript available, then pulling in and inserting content using javascript where you can. Personally I'd be concerned (slightly) with the "no javascript available" case, but not concerned with the "javascript breaks" case, because error handling in your javascript can take care of the "ajax didn't work properly" scenario.

Upvotes: 0

Related Questions