Have Geek Brain

JavaScript Resource Management Design Pattern

As a web developer, a common problem I face is waiting for something to load before doing anything else. In particular, I often hide (using elements display: none;

or visibility: hidden;

as appropriate) while waiting for the background image or CSS file to load.

Consider this examplefrom Last.FM. They overlay a semi-transparent PNG over each album cover image to make it look like it's inside a gem. They allow you to download it when it loads, so depending on the speed of your internet resource, you can see the art image yourself (without overlay) temporarily. In this case, the album cover looks great without the gem effect. But in situations like this, I've found that I don't want the user to see the site's design distorting as resources gradually load. So, on rare occasions, I've hidden everything from the user until the whole kit and kaboodle has loaded. But this is often a pain to check out and can make the user wait quite a long time to see anything (other than the "loading ..." text).

I can think of (and use sometimes) some obvious solutions / tradeoffs:

  • Use some inline CSS so that as certain parts of the loading and rendering of the DOM they are immediately sized / positioned / etc.

  • Immediately render the navigation part of the site so that if the user wanted to use the current page solely to get to another location, they don't have to wait for the rest to load.

  • Loading pixelated images first as placeholders for the layout while lazily loading higher quality images as replacements.

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

  • Show complete information as reference when loading full interface. (Something similar to Gmail Inbox Preview , etc.)

(Sorry if my question is mostly asked and answered ...)

Despite all these ideas, I still hope there are better ways to do some of these things. So I guess what I'm looking for is inspiration and / or any creative ways you guys have seen in the wild to solve this problem.

+2


a source to share


1 answer


This is a common problem. Your best bet would be to optimize your site to load faster. Try YSlow



  • Combine all your JS and CSS assets, so there is only one request.
    • There are many ways to do this, and there are several asset packages for each web framework.
  • First of all make sure your layout template is done
  • Minimize the number of images on your site. Combining things and using CSS sprites helps a lot.
  • If that's not enough yet, you can put your CSS layout and sizing in the HTML file to make sure the browser renders it before the associated CSS
+2


a source






More articles:


All Articles