A Way to Preload Images without JavaScript that is SO Much Better

Updated January 30, 2020 • 25 comments

[ Preload Images with CSS ] Responding to my first attempt at preloading images without JavaScript, CSS-Guru David Bowman graces his audience with a most enlightening set of comments.

Apparently, the image-preloading technique explained in the article is “major overkill” and “totally ridiculous.” Of course, I will be the first to admit that I am no expert in CSS, but I do enjoy sharing my discoveries and watching as people improve upon them. My first attempt at preloading images without JavaScript may indeed be “pretty crappy,” but it certainly works.

Fortunately, several weeks prior to Mr. Bowman’s dazzling performance, insightful reader Duarte helps the community by sharing a far more elegant solution using display: none;. Here is an example of its implementation:

Step 1 — Place this in your CSS file:

div#preload { display: none; }

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

<div id="preload">
   <img src="http://domain.tld/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="http://domain.tld/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="http://domain.tld/image-03.png" width="1" height="1" alt="Image 03" />
</div>

Once in place, this code will ensure that your images are preloaded and available for use elsewhere in the document. Just remember to call the displayed images using the same path as the the preloaded images. After that, everything should work perfectly. Indeed, even CSS-Wizard David Bowman “tested it out” and agrees that “the problem is solved.” Thanks for the confirmation, David! ;)

Alternatively, to avoid the extra (X)HTML markup, you may simply add background images to existing elements that are either dimensionless or empty. For example, to preload three images, image_01.png, image_02.png, and image_03.png, locate three appropriate elements in your markup and place something like this into your CSS file:


#element_01 {
	background: url(path/image_01.png) no-repeat;
	display: none;
	}
#element_02 {
	background: url(path/image_02.png) no-repeat;
	display: none;
	}
#element_03 {
	background: url(path/image_03.png) no-repeat;
	display: none;
	}

..and that should do it! For more information on this technique, check out this article: Pure CSS: Better Image Preloading without JavaScript. And who knows, if we’re lucky, maybe Mr. Bowman will once again grace us with his presence! ;)

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.

25 responses to “A Way to Preload Images without JavaScript that is SO Much Better”

David Bowman 2008/08/09 5:23 pm

Indeed, I’ve returned to comment once again.

First things first: I believe the word you were looking for is “triad,” not “triage.” It would only be a triage of comments if you were physically wounded by what I wrote, which is probably not the case, because you have a pretty forgiving attitude and you were humble enough not to delete my comments.

I just think there are too many bloggers in the world posting common sense techniques and thinking they found something new. And I suspect that this is just a tactic used to drive traffic to their sites. It just seems devious and wrong. Anybody with 10 seconds of CSS experience would have used “display: none” and not even bothered to blog about it. Maybe you did overlook it to begin with, but you seem like a pretty prolific blogger, so to me it just looked like a keyword-laden traffic-funnel post.

Anyway, in the interest of writing concise code, I really did think your original solution was overkill. You wrote a blog post about how Google’s homepage was terribly bloated. It might be bloated and inefficient, “but it works,” just like your first attempt at using CSS for preloading. Your “solution,” proportionally, just about as efficient as Google’s homepage vs. your XHTML version (i.e. about five times longer than necessary).

Jeff Starr 2008/08/10 7:22 am • Post Author

Hi David, I appreciate the comment. I completely understand where you are coming from: the Web is polluted with a ton of garbage. I totally get the point, and continue to do my best to keep the content here at Perishable Press as “high-quality” as possible. I work very hard every day to produce content for this site and keep it running. Every cost is paid for entirely “out-of-pocket” — as you can see, I do not advertised on this site, and certainly derive no income from its existence. I have no interest in writing “keyword-laden traffic-funnel posts,” but rather try to learn as much as possible about my subject matter and post articles to share my discoveries. I may not be perfect, and I may make horrible and brainless mistakes from time to time, but I assure you that I am doing my best to represent myself as honestly, transparently, and sincerely as possible. This is the “real deal,” and will always be that way.

Amos Wenger 2008/08/18 5:10 am

This is addressed to David Bowman : I stumbled across Jeff’s page (first attempt) when I was searching a solution to this very simple problem : I had to preload images. So I created a div and styled it with display:none, and filled it with images. And then I fired Firefox 3 and oh magic it worked. When I went to test it with Opera, guess what ? Look, ma, no preloading :(. Seems that opera guys have over-optimized here. So the only practical and cross-browser solution (as sucky as it is), is effectively to move the div offscreen and leave it display:static. Mr Bowman, I suggest you to be less prompt to bash people in the head.

About accessibility and users having CSS disabled, I guess that.. if you have a webpage that requires image preloading, it is complex enough to “require” CSS to be enabled. It’s not as “bad” as to be browser-specific.

Finally, I’d like to congratulate Jeff for his website, looks great, loads fast, and has sound advice and intelligent+constructive comments.

Jeff Starr 2008/08/18 5:22 pm • Post Author

Thank you for the kind comments, Amos — they are greatly appreciated :)

Amos Wenger 2008/08/19 1:10 pm

You’re welcome Jeff, and one more congrats for.. your ranking on Google. Funny enough, perishablepress.com came 2nd when I googled my name+surname just 3 hours after having posted here.

More on the “display:none = no preloading” issue, I’ve stumbled across a paragraph on the jqModal website (jquery plugin), which contains a more complete explanation and a (better?) workaround. See the “image caching” section here (no spam intended).

Also, apologies for repeating but to anyone reading that, if you’re having sound problems with Flash and display:none objects, read this post and follow-ups.

Jeff Starr 2008/08/20 9:04 am • Post Author

Hi Amos, that preloading method is interesting indeed. I will be looking into it further. As far as I can tell, the technique looks quite similar to the method described here, only with an explicit display:block declaration and the @import inclusion method. The block display property seems obvious (and redundant — divs are block elements to begin with), but the import directives are a mystery. i.e., why import the rules? What is the effect? Does it account for some of the preloading and Flash issues we’ve encountered? I need to check it.. ( thanks for pointing it out :)

Amos Wenger 2008/08/21 10:41 am

Hey Jeff, yes, the method is similar indeed, but the part that caught my eyes was the @media (and not @import, if of course we are talking about the same piece of css, and if my eyes aren’t faulty). I didn’t think about printing and this piece of code reminds me that.. moving images so far offscreen may cause serious printing problems, like many blank sheets and totally wrong layout. (Though it’s not exactly a piece of news that the web isn’t exactly printing-friendly).

Also I’d like to bring up an issue : if a page contains many high-resolution images to be loaded, the browser (tested, FF3/Linux and Opera 0.53/Linux) can stall while loading all the images. I was thinking that maybe a piece of javascript code could limit the number of simultaneous downloads, by writing progressively the “offscreen preloading divs” to the DOM, keeping progress by monitoring onload events on images. I don’t know if anyone is interested in that, though.

Jeff Starr 2008/08/31 8:02 am • Post Author

Hi Amos, sorry for the delay — I am just now returning from a nice vacation and looking forward to getting back into things.

You are correct about the @media — that is what I meant to say (yes, we are looking at the same piece of code). I definitely like the idea of accounting for print stylesheets and will incorporate that method into the next relevant post.

I think the JavaScript solution you mention would be a worthwhile method for anyone doing a lot of heavy image preloading. Most of the preloading that I have been involved with deals with much less content, but that’s not to say that my next project won’t require preloading of that magnitude.

Claudio 2008/11/22 1:13 am

the best “preload images” option I’ve found!
TKS!

kevin 2008/12/02 2:00 pm

Addressed to David Bowman: Do you have any blog so that I could write some nice comments? may be i could learn some techniques from your blog, like how to get real traffic to make money using blogs, without letting people know you are making money???

Hehe, Just a joke. Don’t take it seriously.

Oh, I like this preloading method. Thanks for the post.

Jeff Starr 2008/12/03 3:20 pm • Post Author

@kevin: My pleasure! Thanks for dropping by :)

Mike P 2009/01/23 1:01 pm

Honestly (Mr. Bowman), I don’t see what your problem is with this site. The fact of the matter is that a lot of people looking for information on designing & developing websites are:

a) complete noobies who are probably searching google for this exact type of simple information that they might not have been aware of.

b) cant afford or have trouble learning from big thick textbooks & prefer to work from a “hands on” real-world experience approach searching for each piece of the puzzle they need separately, and then proceeding to implement in their own way.

As you can see, this is not a monetizing site — writing posts that generate a lot of search terms & rank in search engines is not sleazy. It generates a lot of hits because people are looking for this type of information. Since this site provides the information, and doesn’t trick them into clicking on monetizing links, I really don’t see what your qualms are.

I would like to continue to thank Mr. Starr on this excellent resource he has provided. I Originally came across this site about 6 months ago while searching for information about WordPress Security. I am a basic/intermediate web designer/developer, and this site is, quite honestly, is one of the sites I go back to most often while looking for good, simple, information that I may have overlooked or when looking to learn something new that I don’t yet understand.

Maybe, once I have a few nice sites under my belt, I will post a linkback to my own site so you can see some of the material you helped me to create. Thanks a bunch & don’t pay to much attention to these haters.

Comments are closed for this post. Something to add? Let me know.

David Bowman 2008/08/09 5:23 pm

Indeed, I’ve returned to comment once again.

First things first: I believe the word you were looking for is “triad,” not “triage.” It would only be a triage of comments if you were physically wounded by what I wrote, which is probably not the case, because you have a pretty forgiving attitude and you were humble enough not to delete my comments.

I just think there are too many bloggers in the world posting common sense techniques and thinking they found something new. And I suspect that this is just a tactic used to drive traffic to their sites. It just seems devious and wrong. Anybody with 10 seconds of CSS experience would have used “display: none” and not even bothered to blog about it. Maybe you did overlook it to begin with, but you seem like a pretty prolific blogger, so to me it just looked like a keyword-laden traffic-funnel post.

Anyway, in the interest of writing concise code, I really did think your original solution was overkill. You wrote a blog post about how Google’s homepage was terribly bloated. It might be bloated and inefficient, “but it works,” just like your first attempt at using CSS for preloading. Your “solution,” proportionally, just about as efficient as Google’s homepage vs. your XHTML version (i.e. about five times longer than necessary).
Jeff Starr 2008/08/10 7:22 am • Post Author

Hi David, I appreciate the comment. I completely understand where you are coming from: the Web is polluted with a ton of garbage. I totally get the point, and continue to do my best to keep the content here at Perishable Press as “high-quality” as possible. I work very hard every day to produce content for this site and keep it running. Every cost is paid for entirely “out-of-pocket” — as you can see, I do not advertised on this site, and certainly derive no income from its existence. I have no interest in writing “keyword-laden traffic-funnel posts,” but rather try to learn as much as possible about my subject matter and post articles to share my discoveries. I may not be perfect, and I may make horrible and brainless mistakes from time to time, but I assure you that I am doing my best to represent myself as honestly, transparently, and sincerely as possible. This is the “real deal,” and will always be that way.
Amos Wenger 2008/08/18 5:10 am

This is addressed to David Bowman : I stumbled across Jeff’s page (first attempt) when I was searching a solution to this very simple problem : I had to preload images. So I created a div and styled it with display:none, and filled it with images. And then I fired Firefox 3 and oh magic it worked. When I went to test it with Opera, guess what ? Look, ma, no preloading :(. Seems that opera guys have over-optimized here. So the only practical and cross-browser solution (as sucky as it is), is effectively to move the div offscreen and leave it display:static. Mr Bowman, I suggest you to be less prompt to bash people in the head.

About accessibility and users having CSS disabled, I guess that.. if you have a webpage that requires image preloading, it is complex enough to “require” CSS to be enabled. It’s not as “bad” as to be browser-specific.

Finally, I’d like to congratulate Jeff for his website, looks great, loads fast, and has sound advice and intelligent+constructive comments.
Jeff Starr 2008/08/18 5:22 pm • Post Author

Thank you for the kind comments, Amos — they are greatly appreciated :)
Amos Wenger 2008/08/19 1:10 pm

You’re welcome Jeff, and one more congrats for.. your ranking on Google. Funny enough, perishablepress.com came 2nd when I googled my name+surname just 3 hours after having posted here.

More on the “display:none = no preloading” issue, I’ve stumbled across a paragraph on the jqModal website (jquery plugin), which contains a more complete explanation and a (better?) workaround. See the “image caching” section here (no spam intended).

Also, apologies for repeating but to anyone reading that, if you’re having sound problems with Flash and display:none objects, read this post and follow-ups.
Jeff Starr 2008/08/20 9:04 am • Post Author

Hi Amos, that preloading method is interesting indeed. I will be looking into it further. As far as I can tell, the technique looks quite similar to the method described here, only with an explicit display:block declaration and the @import inclusion method. The block display property seems obvious (and redundant — divs are block elements to begin with), but the import directives are a mystery. i.e., why import the rules? What is the effect? Does it account for some of the preloading and Flash issues we’ve encountered? I need to check it.. ( thanks for pointing it out :)
Amos Wenger 2008/08/21 10:41 am

Hey Jeff, yes, the method is similar indeed, but the part that caught my eyes was the @media (and not @import, if of course we are talking about the same piece of css, and if my eyes aren’t faulty). I didn’t think about printing and this piece of code reminds me that.. moving images so far offscreen may cause serious printing problems, like many blank sheets and totally wrong layout. (Though it’s not exactly a piece of news that the web isn’t exactly printing-friendly).

Also I’d like to bring up an issue : if a page contains many high-resolution images to be loaded, the browser (tested, FF3/Linux and Opera 0.53/Linux) can stall while loading all the images. I was thinking that maybe a piece of javascript code could limit the number of simultaneous downloads, by writing progressively the “offscreen preloading divs” to the DOM, keeping progress by monitoring onload events on images. I don’t know if anyone is interested in that, though.
Jeff Starr 2008/08/31 8:02 am • Post Author

Hi Amos, sorry for the delay — I am just now returning from a nice vacation and looking forward to getting back into things.

You are correct about the @media — that is what I meant to say (yes, we are looking at the same piece of code). I definitely like the idea of accounting for print stylesheets and will incorporate that method into the next relevant post.

I think the JavaScript solution you mention would be a worthwhile method for anyone doing a lot of heavy image preloading. Most of the preloading that I have been involved with deals with much less content, but that’s not to say that my next project won’t require preloading of that magnitude.
Claudio 2008/11/22 1:13 am

the best “preload images” option I’ve found!
TKS!
kevin 2008/12/02 2:00 pm

Addressed to David Bowman: Do you have any blog so that I could write some nice comments? may be i could learn some techniques from your blog, like how to get real traffic to make money using blogs, without letting people know you are making money???

Hehe, Just a joke. Don’t take it seriously.

Oh, I like this preloading method. Thanks for the post.
Jeff Starr 2008/12/03 3:20 pm • Post Author

@kevin: My pleasure! Thanks for dropping by :)
Mike P 2009/01/23 1:01 pm

Honestly (Mr. Bowman), I don’t see what your problem is with this site. The fact of the matter is that a lot of people looking for information on designing & developing websites are:

a) complete noobies who are probably searching google for this exact type of simple information that they might not have been aware of.

b) cant afford or have trouble learning from big thick textbooks & prefer to work from a “hands on” real-world experience approach searching for each piece of the puzzle they need separately, and then proceeding to implement in their own way.

As you can see, this is not a monetizing site — writing posts that generate a lot of search terms & rank in search engines is not sleazy. It generates a lot of hits because people are looking for this type of information. Since this site provides the information, and doesn’t trick them into clicking on monetizing links, I really don’t see what your qualms are.

I would like to continue to thank Mr. Starr on this excellent resource he has provided. I Originally came across this site about 6 months ago while searching for information about WordPress Security. I am a basic/intermediate web designer/developer, and this site is, quite honestly, is one of the sites I go back to most often while looking for good, simple, information that I may have overlooked or when looking to learn something new that I don’t yet understand.

Maybe, once I have a few nice sites under my belt, I will post a linkback to my own site so you can see some of the material you helped me to create. Thanks a bunch & don’t pay to much attention to these haters.

123 • Newer Comments »