How to preload images using just CSS

In mid-January we started work on website re-design, part of the spec was to create a fun and colourful navigation that offered something different… So, following a couple of design concepts we had a design and idea signed off. All was looking and working well until I noticed one of several .png files that makeup the navigation took longer than others to load! From a website usability perspective it was one of those Arrr moments!

I asked the question, “How can I preload an image using just CSS?” Well, website browsers load information within a webpage from top to bottom… So by adding:

<div style=”display:none;”>
<img src=”../images/preload-me-first.png” width=”200″ height=”50″ />
</div>

to the top of your web page, the browser will load ‘preload-me-first.png’ (into your computers memory) before information at the bottom of your page… By placing the above code just after the <body> tag you will guarantee to preload an image(s) using just CSS… Finally, it is also worth setting the width and height attributes to add a little extra speed.

So there you have it, how to preload an image using just CSS… Enjoy!

One thought on “How to preload images using just CSS

Leave a Reply