JavaScript Resource Management Design Pattern

Question

As a web developer, a common problem I find myself tackling is waiting for something to load before doing something else. In particular, I often hide (using either display: none; or visibility: hidden; depending on the situation) elements while waiting for a background image or a CSS file to load.

Consider this example from Last.FM. They overlay a semi-transparant PNG over each album art image so that it looks like it's inside a jewel-case. They let it load when it loads, so depending on your internet speed, you may see the art image by itself (without the overlay) temporarily. In this case, the album art looks fine without the jewel-case effect. But in similar situations, I have found that I don't want the user to see the site's design mangled as resources incrementally load. So, in rare cases I have hidden everything from the user until the whole kit and kaboodle has loaded. But this is often a pain to write out, and may force the user to wait for a pretty long time to see anything (besides "loading..." text).

I can think of (and have used on occasion) some obvious solutions/compromises:

1. Use some inline CSS so that as certain parts of the DOM load and render, they will immediately have the correct size/position/etc.

2. Immediately render the navigation part of the site, so that if the user wanted to use the current page purely to get somewhere else, they don't have to wait for the rest to load.

3. Load pixelated images first as placeholders for layout while lazy-loading higher quality images as replacements.

4. Something quirky like using a cute animated gif to distract the user during a "loading..." phase.

5. Show useful information as a reference while loading the full UI. (Something akin to Gmail Inbox Preview, etc.)

(Sorry if my question was basically just asked and answered...)

Despite all of these ideas, I still find myself hoping there are better ways of doing some of these things. So I guess what I'm looking for is some inspiration and/or any creative ways of dealing with this problem that you guys may have seen out in the wild.

Answer 1

This is a common problem. Your best bet is going to be optimizing the site to load faster. Try YSlow

• Combine all your JS and CSS assets so there is only one request each.
  • There are numerous ways of doing this and a number of asset packagers exist for every web framework out there
• Make sure your Layout CSS is proccessed first
• Minimize the number of images in your site. Combining things and using CSS sprites helps a lot
• If that still isn't enough, you could put your layout and sizing CSS in the HTML file to ensure the browser processes it first before the linked CSS