Using the Display CSS Property to Preload Images with CSS and JavaScript

Among the variety of client-side techniques that can be used nowadays for improving the performance of websites, there’s a few that only require an average background in style sheets and JavaScript. Yes, as the title of this article clearly suggests, in this case I’m referring to a set of basic methods that permit you to preload multiple images in the background on a web page, so users can view them on the browser with no noticeable delay.

As with many other approaches that exist in the field of advanced web design, image preloading (also known in design patterns’ jargon as eager loading) is worth careful evaluation, and should be applied consciously. For obvious reasons, prefetching groups of heavy graphics behind the scenes isn’t something that you’ll want to do in every possible case, so caution should be uppermost in your mind if you’re planning to implement some kind of preloading mechanism on your own web pages.

That said, it's time to review the topics covered in the previous tutorial. In that first part of the series, I explained how to use the “width” and “height” CSS properties in a rather tricky way to preload a set of sample images on a basic XHTML document. While this method worked decently well, it required the coding of a few additional empty divs. This is a big annoyance, since the W3C emphasize that each element on a web page must always have a semantic meaning.

On the other hand, however, I have to stress that the method can be enhanced  by getting rid of those ugly and non-semantic containers. But in fact I’m getting ahead of myself, since these improvements will be discussed in depth in upcoming articles. For the moment, in this second installment of the series I’m going to show you how to implement a variation of the image preloading method mentioned above, which this time will make use of the “display” CSS property to work as expected.

Want to see how this method will be developed? Them go ahead and begin reading!