Preloading Images with CSS and JavaScript

Over the last few years, different approaches have emerged, both on the client and the server sides, aimed at speeding up the transfer of contents over the web. For obvious reasons, methods that rely primarily on a web server, like server-side caching and HTTP compression, are well-trusted allies that can be of great help in making web pages load faster.

Things become more complicated, however, when the aforementioned techniques need to be employed with methods that work in the client, as this is always an unsafe, uncontrolled territory. Does this mean that all is lost when you must use a client-side approach for improving the performance of your website? Not at all! First, you can benefit from the natural ability of browsers to cache static files, including CSS, JavaScript, images and so forth. And second, you can always take advantage of progressive enhancement/graceful degradation and implement a bunch of methods that rely on CSS and JavaScript to preload (AKA eager-loading) content.

Certainly, images are good candidates for preloading and caching later in specific situations, though this concept must be carefully evaluated and applied with caution. I have to say, however, that the idea behind "prefetching" images is very interesting, and it's much easier to implement than you may think. Therefore, in this group of articles I'm going to explore several image preloading techniques that use CSS or JavaScript (or a combination of both). This will let you choose whichever one best suits your needs.

Now, let's discover how to preload images on the client side. Let's go!