Pure CSS: Better Image Preloading without JavaScript
Published Tuesday, April 15, 2008 @ 12:34 pm • 15 Responses
After reading my previous article on preloading images without JavaScript 1, Nanda pointed out that adding extra markup to preload images is not the best approach, especially where Web Standards are concerned. Mobile devices, for example, may experience problems when dealing with the following preloading technique:
/* ADD THIS TO CSS */
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
<!-- ADD THIS TO XHTML -->
<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-02.png" width="1" height="1" alt="Image 02" />
<img src="http://perishablepress.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>Thus, as Nanda suggests, it is better to preload images using only CSS. Using the CSS background property, we can preload images via existing <div>s, <span>s, or other elements in the (X)HTML markup.
Let’s say you have three images (e.g., image_01.png, image_02.png, and image_03.png) that you would like to preload using this method. First, examine your markup for three identifiable <div>s (or other elements) that may be used as CSS hooks for the preloaded images. For example, looking at the source code of the current page, I would choose the following three divisions:
<div id="wrap">...<div id="jump">...<div id="header">...
Then, to implement the preload, I would add the following code to my site’s CSS file:
div#wrap {
background: url(image_01.png) no-repeat -9999 -9999;
}
div#jump {
background: url(image_02.png) no-repeat -9999 -9999;
}
div#header {
background: url(image_03.png) no-repeat -9999 -9999;
}Here, we are preloading each image into its own unique <div> and then preventing its display by positioning it to the far left of the browser window. If the preloading elements are empty with no discernible height or width, hiding the preloaded images off-screen should not be necessary because they will not be displayed. Even so, it is probably a good idea to relocate them just to be safe.
Of course, once you have implemented this code to preload your images, they will be immediately available (depending on size) for display in your document as needed. Simply refer to them as normal using whatever CSS code that you would normally use. For example, once these images have preloaded, I could employ the following :hover technique with minimal presentational delay:
a#first:hover {
background: url(image_01.png) no-repeat 50% 50%;
}
a#second:hover {
background: url(image_02.png) no-repeat 50% 50%;
}
a#third:hover {
background: url(image_03.png) no-repeat 50% 50%;
}According to my tests, this technique works well in any browser (including IE 6) that supports the CSS background property. Best of all, this preloading method is entirely unobtrusive, requiring no presentational code and degrading gracefully in non-supportive browsers.
Footnotes
- 1 Also see Preloading Images with CSS and JavaScript for more information on preloading images.
About this article
Related articles
Dialogue
15 Responses Jump to comment form
April 16, 2008 at 10:57 am
One could also make the various constituent image elements into a single large image, which could then be positioned using css. Maybe unwieldy for a large site, but could actually improve the load time of a small site; plus, then you only need one element in order to preload all the images - or is that too crazy?
May 1, 2008 at 11:31 pm
Hi Jeff,
I’m not sure about this - using this method means that there’s no alt tag. Isn’t that bad for accessibility?
I mean if someone with a visual impairment uses a text to voice reader to listen to the page, then it reads the alt tag doesn’t it, so if we use this method, then there is nothing to be read for the images.
I appreciate the images are hidden for the moment, but when you display them, is there anyway of adding the alt tag?
I’m a little cloudy about all of this and I’m not speaking from authority, but that was my impression.
Very interesting nevertheless.
May 28, 2008 at 7:46 am
Hello, I have a question on preloading images. I am preloading four images on my website, which can be seen at http://www.keinert.com -I am using these to change the image of my links when the mouse moves over them.
However, something is still wrong because when I move my mouse off of the “spinning red ball links,” my browser still has to download the spinning blue ball each time.
What am I doing wrong?
Thanks, Kevin.
May 28, 2008 at 4:32 pm
Hello, thanks for the reply! I’m assuming that the blue_ball image reloads every time the mouse moves off a link, because at the very bottom of my IE6 browser, I see the message “downloading…blah,blah,blah…/bb_ball.jpg”
Sometimes the download is slow and the image takes 2 or 3 seconds to change. Most of the time it’s instantaneous.
If this is a caching issue, can you provide more info on how to troubleshoot? I don’t know what far-future headers are.
Thanks, Kevin.
August 17, 2008 at 2:32 pm
Hello there Im currently trying to devolop my homepage for displaying animaiton videos and art images and I came across this webpage when trying to solve this problem of mine. Im trying to create a gallery where you can see the thumbnails of the pictures and when you click on a thumbnail the image will enlarge in a maximum resolution of 800×800 pixels. Beside the image I have 2 arrows pointing in left anr right, when you click on these images it should display the next image in the gallery or previous depending on which one you click. The gallery will not be visible because the image itself will cover it when enlarged. Now what I want to do is to preload and reload all of the images on in the gallery. Cause if I click on the next arrow I dont want to load a hole nother page just to come to the next image if you understand what I mean. So what I want to be able to do is to reload a portion of the webage and not the hole because all of my external links like, About me, photo showreel and so on , and the background should not be reloaded all the time, even thou it is saved in the cache I feel that it is not the best way to do this. So the most optimal way would be if all the images are loaded when you enter the site and when you clikc on a thumbnail that image is displayed and when you click on the next or previous arrow the next images or previosu image is displayed without having to refresh the or reload the page.
Is this possible to accomplish without javascript ? or is there a nother way to do it? I find that it is possible to accomplish with a:hover if you have your thumbnail gallery beside or something else to hover over to display your images. But nothing that can actually fix my problem. thank you for your time
September 26, 2008 at 2:43 pm
Perfect!
October 5, 2008 at 6:06 am
Thanks for this,
we did face lot of problems on few sites, where images are used everywhere. I hope using this technique helps me solves the problem.
Thanks for it.
Regrds
Synergy Informatics
Surat Leading Web Hosting & Design Company
October 5, 2008 at 10:15 pm
Hi Jeff,
I would like to read more from you… especially compared to other blog, cause your articles are simple & effective and answers the problems in perfect sense.
Thanks
Krunal
Synergy Informatics
Share your thoughts..
← Previous post • Next post →
« How to Edit the Firefox Custom Dictionary • Drop-Dead Easy Random Images via PHP »
1 • teddY
April 16, 2008 at 7:00 am
Nice! I’ve never thought of preloading images as background images with a heavily displaced position. I usually use the problematic preloading technique, but I guess it’s better to preload images in background to ensure cross-browser and cross-device compatibility. Just a question though - if that container has a background image assigned to it, then should we create empty containers to preload the images?