CSS Throwdown: Preload Images without JavaScript

♦ Posted by Jeff Starr in CSS, JavaScript

Updated January 30, 2020 • 68 comments

[ Preload Images with CSS ] 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 to do it with only two easy 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="https://perishablepress.com/image-01.png" width="1" height="1" alt="" />
   <img src="https://perishablepress.com/image-02.png" width="1" height="1" alt="" />
   <img src="https://perishablepress.com/image-03.png" width="1" height="1" alt="" />
</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 the Author

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

68 responses to “CSS Throwdown: Preload Images without JavaScript”

Caderial 2010/03/13 7:51 pm

GAH i made a div tag in my last comment! lol i meant

Create a Div tag at the bottom of your page after your footer

Like so: “”

Jeff Starr 2010/03/17 10:02 am • Post Author

@Caderial: I think we get what you’re saying, but you know that method is not going to work. The way your code is written, only the last instance of the background-image property is going to be rendered by the browser. That’s just the way CSS works — in cascading fashion.

As I explain here, there is a way to do what you’re thinking with CSS3.

For tons more on preloading images, check the list of “Related Posts” at the end of the article.

Norberth 2010/08/31 2:06 pm

@David Bowman – What contribution did your “wise” words bring to this post? In a related topic you authoritatively attempt to suggest that “triad” (underground society) is a better word than “triage” (which is also an uninspired choice in the context, but that’s an entirely different matter). I’m sorry, but you lose any sort of remaining credibility and pretty much anything you say is mere uninformed opinion. Go and educate yourself before you start another tirade.

Increazon 2010/10/13 7:23 am

i will use it now for my buttons on the web site http://apokalipsis-2012.ru/ because it blinking now. check it later if the code really work

Increazon 2010/10/13 10:45 am

its looks like it is not working. at least when i mouse over butoon on site, it connecting to server (i can see it using FIREBUG FOR FIREFOX). tHE PATH IS right. so i do not know. hope it will work because i not going to give time to this goal any more. Peace

Morgan 2010/12/29 3:13 pm

Jeff,

When a visitor is that rude (yes, I’m talking about David Bowman) there is no need for you to remain polite. You will not lose or offend visitors.

Tell him to buzz off, and to better himself with something more worthy of his stature. Speak your mind and tell the prick to beat it.

alberto 2011/07/15 2:11 pm

Hello

I would like to know how to implement the preload css in my site… I have pasted the css code on the main.css… Now at album_view.htm, what should I do? I have hundreds of images all at a folder in my site… How do I call this folder to preload…

You can view our present album_viewer here…

http://regidordigital.com/view-album/3531/confecciones-placi

Thx very much
Alberto

Robert 2012/03/09 9:07 pm

Hi Jeff,
Congratulations on solid article write ups. Very good information available here.

Also wanted to ask you if you have considered installing a WordPress Plugin for pagination. Currently the comments span over a huge vertical length. Although you have the scroll to top button installed, IMO, pagination will help a lot. Just my 2 cents to make your blog even better…

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

Caderial 2010/03/13 7:51 pm

GAH i made a div tag in my last comment! lol i meant

Create a Div tag at the bottom of your page after your footer

Like so: “”
Jeff Starr 2010/03/17 10:02 am • Post Author

@Caderial: I think we get what you’re saying, but you know that method is not going to work. The way your code is written, only the last instance of the background-image property is going to be rendered by the browser. That’s just the way CSS works — in cascading fashion.

As I explain here, there is a way to do what you’re thinking with CSS3.

For tons more on preloading images, check the list of “Related Posts” at the end of the article.
Norberth 2010/08/31 2:06 pm

@David Bowman – What contribution did your “wise” words bring to this post? In a related topic you authoritatively attempt to suggest that “triad” (underground society) is a better word than “triage” (which is also an uninspired choice in the context, but that’s an entirely different matter). I’m sorry, but you lose any sort of remaining credibility and pretty much anything you say is mere uninformed opinion. Go and educate yourself before you start another tirade.
Increazon 2010/10/13 7:23 am

i will use it now for my buttons on the web site http://apokalipsis-2012.ru/ because it blinking now. check it later if the code really work
Increazon 2010/10/13 10:45 am

its looks like it is not working. at least when i mouse over butoon on site, it connecting to server (i can see it using FIREBUG FOR FIREFOX). tHE PATH IS right. so i do not know. hope it will work because i not going to give time to this goal any more. Peace
Morgan 2010/12/29 3:13 pm

Jeff,

When a visitor is that rude (yes, I’m talking about David Bowman) there is no need for you to remain polite. You will not lose or offend visitors.

Tell him to buzz off, and to better himself with something more worthy of his stature. Speak your mind and tell the prick to beat it.
alberto 2011/07/15 2:11 pm

Hello

I would like to know how to implement the preload css in my site… I have pasted the css code on the main.css… Now at album_view.htm, what should I do? I have hundreds of images all at a folder in my site… How do I call this folder to preload…

You can view our present album_viewer here…

http://regidordigital.com/view-album/3531/confecciones-placi

Thx very much
Alberto
Robert 2012/03/09 9:07 pm

Hi Jeff,
Congratulations on solid article write ups. Very good information available here.

Also wanted to ask you if you have considered installing a WordPress Plugin for pagination. Currently the comments span over a huge vertical length. Although you have the scroll to top button installed, IMO, pagination will help a lot. Just my 2 cents to make your blog even better…

« Previous Comments • 1…456