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”

Jeff Starr 2009/01/27 9:34 pm • Post Author

@Mike: Thank you — much appreciated :)

Sheri Lee 2009/02/11 4:19 pm

Your website is creative, unusual, unique, beautiful. I’m motivated to finish the website I’m working on. I’m curious, how did you do the see-thru columns? I know how to make background fixed, but the columns are very clever. And how did you get the background? I’m in awe.

Sheri

Jeff Starr 2009/02/11 5:29 pm • Post Author

@Sheri Lee: Thanks for the kind remarks — much appreciated. The transparent columns are achieved with three different background images: one for the top, one for the bottom, and another that repeats for the height of the column. Each of these images is a 24-bit, alpha-transparent PNG file. Further, to optimize performance of the site, all three images are sewn together into a single “sprite” image. To see this, simply view the background image of any corner of any panel. For the site’s main background image, I spent some time in Photoshop 7 playing around with my “inspiring pattern” collection. After a couple of hours, the background began to emerge. I then spent some time fine-tuning the details to account for its intended use here at Perishable Press.

Sheri 2009/02/19 4:34 am

I found your site a few weeks ago while looking for a preload image solution and was awed by the design of your site (and still am) but had not read the other comments. Now I have — and I’m surprised to see intelligent people being so condescending. Is it the evil ‘IT ego’ that causes this? I’m just curious. I’ve worked in lots of IT departments and it seems to be the lurking place. I think, Jeff, that you handled Dave’s remarks very well. Maybe Dave didn’t intend to be intentionally rude but you have to be careful when you send text that doesn’t carry a smile, don’t you? I say keep up the great work, Jeff. This site is a work of art for the mind as well as the eye. Oh, one question, I didn’t know you could use 2 properties for one element — div class= and div id= (i peeked @ your source code). How does that work? Also, what is the value of importing CSS? I know you are busy, I’m patient and thanks for your time.

Jeff Starr 2009/02/22 9:38 am • Post Author

Hi Sheri, I’m not sure what motivates people to leave bizarre comments, but I do know that I want to run a clean ship around here. It would have been easy for me to unleash a mountain of fury on that guy, but you know what? It wouldn’t have been worth it. Take the high(er) road, I always say.

For the CSS questions, yes you can use multiple classes on elements and even on elements that contain an id (only one id per element though). When classes are included on the same element as an id, the id properties will always override any of the class properties, if they exist. I often use ids to structure layout and then sprinkle a few classes around to accommodate styling.

As for importing the CSS, it all depends on your goals. As you may know, you can add CSS via inline styles, linked styles, or imported styles. Each one of these methods encompasses its own sphere of functionality, and includes its own pros and cons. For the most part, there is not much difference between linking and importing CSS styles. I think I used the latter in the case of the Quintessential theme in order to hide CSS from very old browsers.

Jonathan Ellse 2009/03/17 2:24 pm

@Jeff

Ignore David. This site is completely awesome. It is now the first place I check when looking to sort a problem/integrate a new feature. Brilliant work again with this post.

Jeff Starr 2009/03/22 7:37 am • Post Author

@Jonathan Ellse: Thanks for the positive feedback. People who take time to leave encouraging comments inspire me to stay focused and motivated to continue writing, creating, and sharing. There are millions of great blogs out there, so I am honored that you find mine worthy of your attention. Cheers :)

Dave Stuttard 2009/04/26 3:49 pm

Hi, thanks for inviting me to this topic (I am currently posting to the 4G Blacklist one, but this one is also very enlightening! May I just concur all the good things people have said about this website and suggest that certain others try to avoid cluttering it up with banal comment.

I have discovered it and will certainly be consulting it profusely from now on for developing my modest web design skills (and my websites).

On this topic, I would only save a few seconds on my current websites if a scrolling Flash gallery of photos (a portfolio) could be preloaded – any ideas (preload the movie file or just the images)? This will be more significant when I display high-resolution photos.

By the way, it would be great if a directory full of images could be preloaded together using one short line of code – is this possible (to reduce the amount of repetitive lines of code)?

Any comments on these questions would be appreciated.

Thanks, Dave

PS: Sorry, but can two of my websites be removed from your records (I mistakenly entered them all when I registered) – when you hover or click on my name, all three are addressed together, resulting in nothing and someone might be daft enough to want a peak?

Jeff Starr 2009/04/29 9:51 am • Post Author

@Dave Stuttard: I couldn’t agree more about avoiding “banal” comments! Some are tolerable, but thankfully I am blessed with an incredibly intelligent audience, so a majority of the comments are just straight-up awesome. :)

As for the Flash gallery, I would preload the content via Flash, especially if they won’t be shown otherwise. If a user has Flash, and is watching the movie, then preloading in the background will facilitate the usability of the experience. On the other hand, if you preload the images only and Flash is not available, you may be wasting bandwidth, processing power, and so on.

And, for preloading entire directories of images, it isn’t really possible using only a few lines of JavaScript, but with a little help from PHP, it is totally possible, for example: Preloading Images from a Directory.

PS: I removed as many of the extraneous URLs from your author links as possible. Let me know if I missed any!

James 2009/06/02 7:25 am

Hello,

Great bit of CSS, but it only works for me in internet explorer (version 6) using fusion for mac with old install of XP for testing.

Does not work on latest safari or firefox (mac)

Thanks.

oh the *images* should be before or after

Dave 2009/08/12 8:06 pm

Or, if the preloader is for an AJAX load, simply stick the image inside the element, then replace it in the callback function you’re surely calling when the data finishes loading. No-mess instant loader that works every time.

David Winstead 2009/10/06 4:52 am

Your CSS trick worked for me where I needed to preload images for a javascript slideshow on a site I’m building… I only checked it in Firefox, and images appear instantly! Thank You and keep up the good work!!

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

Jeff Starr 2009/01/27 9:34 pm • Post Author

@Mike: Thank you — much appreciated :)
Sheri Lee 2009/02/11 4:19 pm

Your website is creative, unusual, unique, beautiful. I’m motivated to finish the website I’m working on. I’m curious, how did you do the see-thru columns? I know how to make background fixed, but the columns are very clever. And how did you get the background? I’m in awe.

Sheri
Jeff Starr 2009/02/11 5:29 pm • Post Author

@Sheri Lee: Thanks for the kind remarks — much appreciated. The transparent columns are achieved with three different background images: one for the top, one for the bottom, and another that repeats for the height of the column. Each of these images is a 24-bit, alpha-transparent PNG file. Further, to optimize performance of the site, all three images are sewn together into a single “sprite” image. To see this, simply view the background image of any corner of any panel. For the site’s main background image, I spent some time in Photoshop 7 playing around with my “inspiring pattern” collection. After a couple of hours, the background began to emerge. I then spent some time fine-tuning the details to account for its intended use here at Perishable Press.
Sheri 2009/02/19 4:34 am

I found your site a few weeks ago while looking for a preload image solution and was awed by the design of your site (and still am) but had not read the other comments. Now I have — and I’m surprised to see intelligent people being so condescending. Is it the evil ‘IT ego’ that causes this? I’m just curious. I’ve worked in lots of IT departments and it seems to be the lurking place. I think, Jeff, that you handled Dave’s remarks very well. Maybe Dave didn’t intend to be intentionally rude but you have to be careful when you send text that doesn’t carry a smile, don’t you? I say keep up the great work, Jeff. This site is a work of art for the mind as well as the eye. Oh, one question, I didn’t know you could use 2 properties for one element — div class= and div id= (i peeked @ your source code). How does that work? Also, what is the value of importing CSS? I know you are busy, I’m patient and thanks for your time.
Jeff Starr 2009/02/22 9:38 am • Post Author

Hi Sheri, I’m not sure what motivates people to leave bizarre comments, but I do know that I want to run a clean ship around here. It would have been easy for me to unleash a mountain of fury on that guy, but you know what? It wouldn’t have been worth it. Take the high(er) road, I always say.

For the CSS questions, yes you can use multiple classes on elements and even on elements that contain an id (only one id per element though). When classes are included on the same element as an id, the id properties will always override any of the class properties, if they exist. I often use ids to structure layout and then sprinkle a few classes around to accommodate styling.

As for importing the CSS, it all depends on your goals. As you may know, you can add CSS via inline styles, linked styles, or imported styles. Each one of these methods encompasses its own sphere of functionality, and includes its own pros and cons. For the most part, there is not much difference between linking and importing CSS styles. I think I used the latter in the case of the Quintessential theme in order to hide CSS from very old browsers.
Jonathan Ellse 2009/03/17 2:24 pm

@Jeff

Ignore David. This site is completely awesome. It is now the first place I check when looking to sort a problem/integrate a new feature. Brilliant work again with this post.
Jeff Starr 2009/03/22 7:37 am • Post Author

@Jonathan Ellse: Thanks for the positive feedback. People who take time to leave encouraging comments inspire me to stay focused and motivated to continue writing, creating, and sharing. There are millions of great blogs out there, so I am honored that you find mine worthy of your attention. Cheers :)
Dave Stuttard 2009/04/26 3:49 pm

Hi, thanks for inviting me to this topic (I am currently posting to the 4G Blacklist one, but this one is also very enlightening! May I just concur all the good things people have said about this website and suggest that certain others try to avoid cluttering it up with banal comment.

I have discovered it and will certainly be consulting it profusely from now on for developing my modest web design skills (and my websites).

On this topic, I would only save a few seconds on my current websites if a scrolling Flash gallery of photos (a portfolio) could be preloaded – any ideas (preload the movie file or just the images)? This will be more significant when I display high-resolution photos.

By the way, it would be great if a directory full of images could be preloaded together using one short line of code – is this possible (to reduce the amount of repetitive lines of code)?

Any comments on these questions would be appreciated.

Thanks, Dave

PS: Sorry, but can two of my websites be removed from your records (I mistakenly entered them all when I registered) – when you hover or click on my name, all three are addressed together, resulting in nothing and someone might be daft enough to want a peak?
Jeff Starr 2009/04/29 9:51 am • Post Author

@Dave Stuttard: I couldn’t agree more about avoiding “banal” comments! Some are tolerable, but thankfully I am blessed with an incredibly intelligent audience, so a majority of the comments are just straight-up awesome. :)

As for the Flash gallery, I would preload the content via Flash, especially if they won’t be shown otherwise. If a user has Flash, and is watching the movie, then preloading in the background will facilitate the usability of the experience. On the other hand, if you preload the images only and Flash is not available, you may be wasting bandwidth, processing power, and so on.

And, for preloading entire directories of images, it isn’t really possible using only a few lines of JavaScript, but with a little help from PHP, it is totally possible, for example: Preloading Images from a Directory.

PS: I removed as many of the extraneous URLs from your author links as possible. Let me know if I missed any!
James 2009/06/02 7:25 am

Hello,

Great bit of CSS, but it only works for me in internet explorer (version 6) using fusion for mac with old install of XP for testing.

Does not work on latest safari or firefox (mac)

Thanks.

oh the *images* should be before or after
Dave 2009/08/12 8:06 pm

Or, if the preloader is for an AJAX load, simply stick the image inside the element, then replace it in the callback function you’re surely calling when the data finishes loading. No-mess instant loader that works every time.
David Winstead 2009/10/06 4:52 am

Your CSS trick worked for me where I needed to preload images for a javascript slideshow on a site I’m building… I only checked it in Firefox, and images appear instantly! Thank You and keep up the good work!!

« Previous Comments • 123 • Newer Comments »