A Way to Preload Images without JavaScript that is SO Much Better
Published Saturday, June 14, 2008 @ 2:01 pm • 11 Responses
Responding to my first attempt at preloading images without JavaScript, CSS-Guru David Bowman graces his audience with a most enlightening triage 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 this article
Related articles
- CSS Throwdown: Preload Images without JavaScript
- Preloading Images with CSS and JavaScript
- Pure CSS: Better Image Preloading without JavaScript
- Drop-Dead Easy Random Images via PHP
- Folder Background Images in WinXP
- Pure CSS: Remove Link Properties for Linked Images with Borders
- WordPress Basics: Uploading and Displaying Images
Dialogue
11 Responses Jump to comment form
August 18, 2008 at 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.
August 19, 2008 at 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 at http://dev.iceburg.net/jquery/jqModal/ (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 http://perishablepress.com/…/#comment-66277 and follow-ups.
August 21, 2008 at 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.
November 22, 2008 at 1:13 am
the best “preload images” option I’ve found!
TKS!
December 2, 2008 at 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.
Share your thoughts..
← Previous post • Next post →
« 3 Ways to Exclude Content from WordPress Feeds • Does Google Hate Web Standards? »
1 • David Bowman
August 9, 2008 at 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).