#1 — Arjan Eising

This will not work as you expect…
The images are loaded, but that is because they are in the XHTML code.
The CSS does not apply any background to the div-element, because you ‘overwrite’ the background with an empty one.

#3 — Mark

With this method, a user without CSS or CSS disabled is going to see a series of images at the bottom of the page. Why not do a width="0"/height="0" on each img tag?

#5 — Lee Allen

Some browsers will not load an image with a width of 0px and height of 0px set as they realise it is not showing. It needs to be at least 1 x 1 px!

#7 — Lee Allen

As far as i know its the more recent browsers IE6+ and Firefox 2.0+. I have read about this issue before but have taken it into account rather than testing it.

#9 — Marco

I don’t know if I think this is absolutely stupid (which it actually is), but on the other hand it’s really genious.

I like fresh ideas like this one, keep it up!

Greetings,
Marco

#10 — Nanda

Its better to assign background images with css (e.g. with url(’image.png’) to either empty xhtml elements, or existing ones that don’t need a background image. You can do it this way without adding any extra html code. adding html to a site for this purpose should not be encouraged as it does not follow the semantic standards, it will create problems in certain mobile browsers for instance.

#12 — Nanda

In the past I have just used empty s, unless they have something inside them they will not have any height/width attributes and so will not show they background images. You can also use any existing elements in your code and simply move the background image off screen by setting something like “background: url(image.png) no-repeat left -10000 -10000)”. This way is probably best as it involves no extra code in your xhtml, so keeping the rule of no presentational code.

#14 — Nanda

The CSS only method is certainly better, it will work in any browser that supports background images, so far I’ve had no problems in any modern browsers (including IE 6).

#16 — Duarte

Hello Perishable.
Interesting method, but won’t it work if you just use display:none;?

#18 — Duarte

Glad i could help Perishable, btw congratulations on the great website and articles you provide, i have learned a lot. Thank you.

#19 — Vilmer

Thank you for this very useful post. I make ‘360 degrees virtual tours’ and had the problem that visitors had to wait for a more than 1 megabyte image to load after a change of scene. Now I have implemented your code, with the display:none command, without using an external css file, and the images load in a few seconds now!
See the source of the link to one of my tours above.

Thanx! And pls let me know if it works on all browsers, since I only have iexplorer 7 and the latest firefox..

#21 — zjk

the best way i found actually is display:none; of course you should put a .htaccess file with these lines in your media online directory:

ExpiresActive on
ExpiresDefault "access plus 30 minutes"

(ref:http://httpd.apache.org/docs/2.0/mod/mod_expires.html)

now i try to cleanup some, the whole animation loading as long as it sometimes look a bit and rough ^^

anyway with an infinite and unpredictable number of image to preload, i suggest to improve a bit this functionnality… (i’m actually trying to find how to catch an event like “all images are preload, display:block; the whole thing”)

if you have ideas…

#23 — John

For hiding images it is possible to use z-index

#25 — David Bowman

pretty crappy to post a bunch of code that you didn’t even test before you spewed it out onto the internets.

why do you have to position the DIV off the screen? it’s already hidden with CSS. it’s never, ever going to be visible unless CSS is disabled or unsupported.

#26 — David Bowman

yeah, i just tested it out… all you have to do is hide the DIV that contains the preloaded images using “display: none” and the problem is solved. it doesn’t require positioning, overflow, height/width properties. just one line of CSS. your solution is major overkill.

#27 — David Bowman

just read through the comments above.

“A very elegant improvement indeed, Duarte!”

why don’t you just delete this page or take down your bloated code? you just didn’t know enough about CSS to realize that what you posted to being with was totally ridiculous.

#29 — John

2 David: good idea !

CSS:

img.preload { display: none; }

HTML:

<img src="http://perishablepress.com/image-01.png" alt="" class="preload" />
<img src="http://perishablepress.com/image-02.png" alt="" class="preload" />

#30 — beenee

Worked excellent for my project after Javascript preload methods failed with Safari (Mac).
Thanks for your efforts!
b.

#32 — SneakyWho_am_i

For me, display:none broke it. I don’t think that I would use this technique in production for semantic reasons, but I have been doing it in testing and as long as I DON’T display:none it, it works fine. I can’t tell you which browser didn’t like it being invisible that way though. May have been Firefox 3.

Some simple tests though; use the “preloaded” images (on an empty cache of course) as cursors on hover, or reveal them on activation of a link (in a background tab).

Related: We’ve found that if you display:none; a swf movie that you’ve embedded with x/html, that movie becomes totally silent. Never thought to check whether it actually loads or not, but to hide flash you have to move it offscreen.

I’m not a fan of people who hide anything that makes a horrible noise on the internet though, I have my own music playing when I’m working, thank you very much, jerks (not you, them)

Anyway, I HOPE that I’ve not talked a lot of rubbish just now.

#34 — Sunil Gupta

Hi walrus,

I am done with the instructions that you mentioned. But nothing is displaying in the browser

#35 — evan

Ah, this trick is pretty sneaky, if it works I like it..

#36 — Adam

It should be noted that if you are preloading images in CSS at the bottom of your page, that you set the ALT tag as blank alt=”" so that they don’t appear for anyone using text only or screen reader browsers. Otherwise, at the bottom of their page they’re going to see a massive list of images “Image 1″, “Image 2″ that are completely irrelevant.

If they are for preloading, you don’t want them to appear as part of the website.

Also… instead of “display:none” … try “visibility:hidden”.
If the container is 1px by 1px it doesn’t really matter if it takes up physical space.

#38 — Timothy Stone

Bowman never struck me as a complete ass when I met him. Looks like I was wrong. What’s with that triad?

#39 — Mike

@David Bowman

Man, you couldn’t have been much more of a jerk about it, could you?

#41 — Adam

Me again, thought I’d add another suggesting for people regarding preloading images (with the assumtion they are for hover effects).

You could use the “sprite” method (something I’ve been playing with).
For example, if you have a bunch of buttons and they all have a hover effect you simply join the two images together to make one image.

So lets say you have a button that is 100px by 50px.
Join it with the other graphic to make one image that would become 200px x 50px. (Buttons are side by side in the graphic).

Then.. in your CSS you do this:
============================
a {
     display:block;
     width:100px;
     height:50px;
     background-image:url('mysprite.gif');
     background-repeat:no-repeat;
     background-position:0px 0px;
}
a:hover {
     background-position: -100px 0px;
}

So basically all you are doing is repositioning the background image so that the hover part is now visible.

It also means, you dont have any additional stuff to do to preload anything because the graphic has been loaded fully.

Hope that helps someone :)

Adam

#43 — Finn

This is excellent, I use it to load my Virtual Image Tour in WordPress. Thank You…

#44 — martin white

Well done Adam and thank you!

I’ve been making a navigation list with 4 states for each link - the sprite method has reduced my link images from 28 to 7 - nice!

This is by far the slickest method which doesn’t require any surplus markup.

Keepin’ it nice n tidy!

#45 — Nic

Just curious, what applications does this have? The only thing I can think is for CSS image rollovers- in which case sprites are typically the best solution (and leaves no extraneous markup).

#47 — Nic

Sure but- why not just include the images in the page- where they belong?

#49 — Chetter Hummin

The drawback is, because the images are technically part of the page, the browser is going to load them… that’s why it’s a preload, right? But it will load them WITH the rest of the page. A Javascript preload usually triggers just after the page is rendered, while the user is looking at the finished page. This will trigger DURING the layout. So it will slow down the initial page load and rendering.

I’m sticking with the Javascript. Besides, it’s like 5 lines of code - that’s LESS than this method.

#51 — Antony

the method is completely wrong. I think you’re forgetting the most basic of CSS/xHTML/JS. HTML is for Presentation, CSS is for Styling and Javascript is for the Behavior.

You’re using CSS to simulate behavior to a page which is wrong. Imagine a screen reader or a search engine trying to crawl this web page…. get it? How would you explain this DIV on a search engine? Also the empty ALTs are so lame! This is so Web -2…

cheers

#53 — mjcpk

@Nic - The images only belong IN the page if they are content. If they are just there to make things pretty then they should be referenced in the external CSS file.

The golden rule is if you turn CSS off does the absence of the image detract from the meaning of the page? If so put the image in the HTML, if not put it in CSS.

@Antony - HTML is for content. It is for the bits that have meaning. CSS is for the styling of the content. Therefore CSS is the for PRESENTATION of the HTML.

@martin white - whilst you’re at it you could combine all the images into one big sprite and go from 28 images to 1.

@everyone - There are lots of reasons to avoid using javascript. Not least of all because that JS should be in a separate file and therefore requires another HTTP connection to fetch it. If you’re already using a CSS file then it doesn’t require another HTTP connection to preload some images with it.

#54 — Antony

@Jeff Starr: no I don’t. I’m just using a simple JS preloader when I have situations like rollover navigation buttons etc. Your technique is very clever thought it can’t be used because of the nature of xHTML and CSS.

@mjcpk: we’re saying the same thing but you must understand that this method is trying to create ACTIONS and BEHAVIOR on a web page using CSS which is semantically wrong. There is a good reason why JS is there and I can sacrifice one more file request for the shake of image preloading. I’m always using CSS Sprites when it comes to re-usable graphics on my pages so one more file request is not a big deal. For me it matters more the content to have meaning and Web Standards to work on my pages.

#56 — ravindra

Nice post! I like it….The images are loaded, but that is because they are in the XHTML code. it also very light and it download very fast . great

#57 — Adam

Hmmm, well this seems to have got a little out of hand :)

@Antony - Its nice to see you understand the accessibility side of things with the empty images without “alt” tags. Did you know that if an image doesn’t contain an alt tag it doesn’t appear on a screenreader? Alt tags are there to provide an Alternative description for the image in the case where it is important to make sure the person browsing the website can still understand the message of the page IF the image is part of that message. Preloaded images don’t need alt tags. The original image can contain it. Lets think of those people using screenreaders for a moment… I personally wouldnt want to know there was an image call “preloaded image” on the page because it means nothing to my experience of reading the page I’m on. So lets not stick them in places they aren’t needed without thinking about the logic of why we put it there.

Anyway, a-side, Im with @mjcpk on this and personally believe the CSS approach is better because.. well, it works without Javascript, less HTTP requests and the total image sizes are lower (combining 2 images to one is smaller because there arent two image headers involved and it combines pallets).

Thinking of accessibility again, lets not just assume that everyone has Javascript. In the instance of it being disabled, the CSS hover effect is still going to work. CSS has something called “hover” Antony. Its an effect and its been around a long time. Its purpose is to create an “effect” when people do things on the page. It’s so we don’t have to rely on Javascript all the time to do very basic procedures such as mouseover effects. I personally don’t want to have to apply a function to every link on the page OR produce a recursive onload event to apply a hover effect to my elements. That’s why CSS has these little things to help us apply a global effect quickly to the page. What you are saying is that CSS should not have the :hover effect anymore because its producing an action and a behaviour. (looks puzzled).

Oh, and another thing.. preloaded images still load at almost the same time as the page content. Did you know that the header scripts run when the XHTML code is finished loading and NOT the images? This means that whilst images are loading in the body, your javascript is already running too and loading those additional preloaded images. It doesn’t wait until all images in the BODY are finished before it fires.

Finally.. the “nature” of CSS and XHTML is what exactly? The purpose of XHTML is to produce a globally aligned programming structure that we can follow to help us produce sites that work better on a myriad of browsers and devices. CSS is the thing that then paints it.

Javascript should only be used to enhance the experience for those that can use it, the website should NEVER, in any circumstance, rely on it as its primary source of functioning. There should always be a fallback. So the less we use Javascript, the better.