Have a new project in the pipeline?

Proposal Form

How to preload images using just CSS

1st February, 2011

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!

Web Design Posts

Recent Posts

18th January, 2023

Looking ahead to 2023

16th December, 2022

NHS Maternity Artwork