Removing Non-Semantic Markup when Preloading Images with CSS and JavaScript

While preloading heavy graphics on a web page shouldn't be done in every possible case, it's worth the hassle in situations where one or multiple images need to be viewed on the browser with no noticeable lag. A real-world example of this happens when working with large online ads. If users have to wait too long to see the benefits of a specific product or service because the banner takes forever to download, the ad campaign will be doomed to fail from the very beginning.

Fortunately, there are a few straightforward approaches that can be used for prefetching images in the background. Most of them take advantage of the functionality offered by CSS and JavaScript to do their business properly. Obviously, preloading methods that have a strong dependency on client-side scripting are less reliable than the ones that utilize style sheets, but both deserve a close analysis; this can help you evaluate their pros and cons.

To demonstrate how easy it is to preload a set of sample images with CSS, in the two articles that preceded this one I implemented a couple of basic methods that assigned the corresponding images as background graphics to a group of empty divs. While putting these methods to work was truly a breeze, both of them required the coding of additional, non-semantic markup. Conscientious web designers should avoid this whenever possible.

The good news is that it’s feasible to develop a CSS-based preloading approach without having to write a single portion of ugly (X)HTML. To prove the veracity of this claim, in this third installment of the series I’m going to set up a method that will use only the existing semantic markup of a web page.

Are you eager to learn the full details of this process? Then start reading right now!