A common pattern on interactive web sites is to include a ‘loading’ image (sometimes called a ‘throbber‘), and display the image when an asynchronous action is taking place. This is usually implemented by placing an animated GIF inside a div that is initially hidden, and is displayed by JavaScript that is executed when the action begins.

However, bad things can happen when you do not initially hide the loading image using CSS. I’m an advocate of using NoScript to block JavaScript execution on untrusted sites, and I found a site that had a working throbber in my face while trying to read a blog post. Because NoScript blocked the JavaScript execution, the code that initialized the loading image by hiding it never executed, and the annoying circular ’spinning wheel’ made me move on without reading the post.

The way it should work:

1. Set the initial style of the loading image <div> to include display: none;
2. When the action starts, modify the <div>’s style to display: block;
3. When the action ends, return to display: none;