CSS Throwdown: Preload Images without JavaScript

Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how.. (only two steps!)

Step 1 — Place this in your CSS file:

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

Step 2 — Place this at the bottom of your (X)HTML document:

<div id="preloaded-images">
   <img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 02" />
   <img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 03" />
</div>

..and that’s a wrap! All images are preloaded and ready for calling as you please. Completely valid, standards-compliant image preloading via CSS and (X)HTML!!

About this article

This is article #373, posted by Perishable on Sunday, July 22, 2007 @ 03:43pm. Categorized as Presentation, and tagged with css, images, javascript, notes, optimize, tips, tricks. Updated on February 04, 2008. Visited 20569 times. 24 Responses »

Bookmark • Trackback • Comment • Subscribe • Explore

« Wrapping Your Head around Downlevel Conditional Comments • Up • Permanently Redirect a Specific IP Request for a Single Page via htaccess »

24 Responses

1 • July 23, 2007 at 7:01 am — Arjan Eising says:

This will not work as you expect…
The images are loaded, but that is because they are in the XHTML code.
The CSS does not apply any background to the div-element, because you ‘overwrite’ the background with an empty one.

2 • July 23, 2007 at 10:05 am — Perishable says:

Yes, thank you. I am updating the article with something that actually works ;)

I think the updated code works fine. I tested it in Firefox, Opera, and IE7. Let me know if something goes bonkers..

3 • July 23, 2007 at 4:36 pm — Mark says:

With this method, a user without CSS or CSS disabled is going to see a series of images at the bottom of the page. Why not do a width="0"/height="0" on each img tag?

4 • July 23, 2007 at 6:05 pm — Perishable says:

Good call, Mark! Anything to enhance usability/accessibility is always welcome. I have updated the (X)HTML code with your suggestions. Thank you for helping to improve the method!

5 • August 19, 2007 at 2:30 am — Lee Allen says:

Some browsers will not load an image with a width of 0px and height of 0px set as they realise it is not showing. It needs to be at least 1 x 1 px!

6 • August 19, 2007 at 8:49 am — Perishable says:

That makes sense.. Do you happen to know which browsers behave that way? Perhaps I will modify the example..

7 • September 4, 2007 at 6:24 am — Lee Allen says:

As far as i know its the more recent browsers IE6+ and Firefox 2.0+. I have read about this issue before but have taken it into account rather than testing it.

8 • September 4, 2007 at 9:53 pm — Perishable says:

Okay, I went ahead and changed the code in the post to specify 1×1 image sizes. I think the logic is sound, and until I find time to test and research it myself, I would rather error on the side of caution. Thanks for the heads up!

9 • November 7, 2007 at 1:37 pm — Marco says:

I don’t know if I think this is absolutely stupid (which it actually is), but on the other hand it’s really genious.

I like fresh ideas like this one, keep it up!

Greetings,
Marco

10 • February 12, 2008 at 12:00 pm — Nanda says:

Its better to assign background images with css (e.g. with url(’image.png’) to either empty xhtml elements, or existing ones that don’t need a background image. You can do it this way without adding any extra html code. adding html to a site for this purpose should not be encouraged as it does not follow the semantic standards, it will create problems in certain mobile browsers for instance.

11 • February 13, 2008 at 10:58 am — Perishable says:

All excellent points, Nanda. Thank you for sharing them with us! Do you have any prime examples of which (X)HTML elements would best serve this technique? I can think of a few (e.g., <br />, <hr />, etc.) with which the background images wouldn’t be visible, but perhaps I am overlooking the obvious (again).. ;)

12 • February 14, 2008 at 4:38 am — Nanda says:

In the past I have just used empty s, unless they have something inside them they will not have any height/width attributes and so will not show they background images. You can also use any existing elements in your code and simply move the background image off screen by setting something like “background: url(image.png) no-repeat left -10000 -10000)”. This way is probably best as it involves no extra code in your xhtml, so keeping the rule of no presentational code.

13 • February 17, 2008 at 9:21 am — Perishable says:

Hi Nanda, thanks for continuing the conversation ;) Reading your comment, I am assuming that WordPress ate the “<div>” placed directly before the “s” in your first sentence. If so, I would argue that an empty <div> (or any other element) qualifies as “non-semantic” markup, which should also be avoided within a strictly web-standards context. Admittedly, an empty element is an improvement over one that is filled with images, however, I think that your second, CSS-only method serves as a far better solution overall. Do you know if there are any browsers for which the CSS-only technique does not work?

14 • February 17, 2008 at 9:38 am — Nanda says:

The CSS only method is certainly better, it will work in any browser that supports background images, so far I’ve had no problems in any modern browsers (including IE 6).

15 • February 17, 2008 at 3:26 pm — Perishable says:

Excellent — thanks for sharing this method with us. I am going to experiment a bit and perhaps check a few crusty browsers for support. After spending some quality time with the technique, I will update this article and post an “new and improved” version! Thanks again for your help! :)

16 • May 2, 2008 at 2:36 pm — Duarte says:

Hello Perishable.
Interesting method, but won’t it work if you just use display:none?

17 • May 4, 2008 at 7:17 am — Perishable says:

Hi Duarte,

Yes, I think this method will work when using display:none;. I have yet to test it, but logically it makes sense. Such images are still loaded by the browser, yet not displayed to the user. Thus, the images will have been “preloaded”. A very elegant improvement indeed, Duarte — thank you! ;)

18 • May 5, 2008 at 2:22 pm — Duarte says:

Glad i could help Perishable, btw congratulations on the great website and articles you provide, i have learned a lot. Thank you.

19 • May 7, 2008 at 5:30 am — Vilmer says:

Thank you for this very useful post. I make ‘360 degrees virtual tours’ and had the problem that visitors had to wait for a more than 1 megabyte image to load after a change of scene. Now I have implemented your code, with the display:none command, without using an external css file, and the images load in a few seconds now!
See the source of the link to one of my tours above.

Thanx! And pls let me know if it works on all browsers, since I only have iexplorer 7 and the latest firefox..

20 • May 7, 2008 at 8:56 am — Perishable says:

Sounds great, Vilmer — thanks for the feedback concerning your very practical application of the CSS-preloading technique. As for the cross-compatibility, I have not tested every browser on earth, but can definitely reassure you that the image-preloading method will work for a vast majority of your visitors. I think just about any modern browser (e.g., Firefox, Opera, IE7+, Safari, etc.) supports it.

21 • May 13, 2008 at 12:40 pm — zjk says:

the best way i found actually is display:none; of course you should put a .htaccess file with these lines in your media online directory:

ExpiresActive on
ExpiresDefault "access plus 30 minutes"

(ref:http://httpd.apache.org/docs/2.0/mod/mod_expires.html)

now i try to cleanup some, the whole animation loading as long as it sometimes look a bit and rough ^^

anyway with an infinite and unpredictable number of image to preload, i suggest to improve a bit this functionnality… (i’m actually trying to find how to catch an event like “all images are preload, display:block; the whole thing”)

if you have ideas…

22 • May 13, 2008 at 4:12 pm — Perishable says:

Careful with that htaccess, zjk! Setting default content expiration is great, so long as you specify expiration times for specific file types (e.g., .js, .css, .html, etc.) as needed. Depending on your needs, a default expiration value of 30 minutes may work fine for, say, images and flash files, but you may want to optimize performance by handling other file types differently.

23 • May 14, 2008 at 2:46 am — John says:

For hiding images it is possible to use z-index

24 • May 14, 2008 at 8:29 am — Perishable says:

Ah yes, good call — thanks for the reminder :)

Drop a comment

3G Blacklist finally unleashed!

Perishable Press