reload

page load time:
 

class=bgimage

If you have a CSS class that specifies a background image, but none of the elements in the page use that class, then the background images isn't downloaded. This is true in every browser I've tested. What happens if an element uses that class and has "display: none" or "visibility: hidden"? In Opera 10.10 and Firefox 3.6 the image isn't downloaded. But the background image is downloaded in IE 8, Chrome 4, and Safari 4. (I didn't test other browser versions.)

This test page has an element that uses the "bgimage" class. That class has "display: none" and a background image that takes 4 seconds to download. If the page load time is under 4 seconds, the image wasn't downloaded. If the page load time is over 4 seconds, the image was downloaded.

Takeaway: If an element with a background image may not be shown to the user, don't create it and hide it. Either create it later, or style it when it gets shown.