View Full Version : Preload images used in a background-url?

Rune Carlsen
05-07-2004, 08:29 AM

I have a <TD> with a background-url set.
I also have a onMouseOver effect that changes this image.
This works fine, though I would like to preload these images, as some of my users experience flickering.

Is there a easy way to do this, as we normally preload other images?

(Please don't say I should use <img> insetad, as there is a reason for me not doing that... )


05-07-2004, 09:42 AM
Nah just preload them like normal, then when you do the background-image swap it will come from cache, providing you refer to the same image at the same address.

Rune Carlsen
05-07-2004, 10:00 AM
So, I should only use a script like this in the head?

if (document.images)
img1 = new Image();
img1.src = "myPreloadImage.gif";

But is this correct?
Do I need to make it part of a function and call it? Hmm. Help me please.


05-07-2004, 01:27 PM
That's just fine but if you have multiple images to preload, it's better to put them in an array.

function preloadImages(){
var arrImgs = new Array("myPreloadImage.gif","myPreloadImage2.gif", ...);
var arrPreload = new Array();
for (var i=0;i<arrImgs.length;i++){
arrPreload[i]=new Image();

Rune Carlsen
05-07-2004, 01:32 PM
Well, thanks, but what about this:

1: All this goes in HEAD?
2: Can I just refer to these images in a background-url as well? All I need to do it to use the name "myimage.gif" ?


05-07-2004, 01:59 PM
That goes in the head. You preload all your images that are used in swapping, be it background image or image in <img> tag.

05-07-2004, 02:28 PM
Unless your background is tiled, you can use a "sliding door" method. I don't remember ALA link, but I have a page that illustrates it: www.vladdy.net/Demos/SubmitImage.html.

05-07-2004, 06:00 PM
That's documented here http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

05-07-2004, 06:43 PM
Thanks, brothercake.
Never seen the page you linked before, but I do remember ALA article about the same method....