View Full Version : Images not preloading

Jul 23rd, 2002, 11:10 PM
I am trying to preload images into my document using arrays and a loop:

doc_images[0] = 'path/image0.jpeg';
doc_images[1] = 'path/image1.jpeg';
doc_images[2] = 'path/image2.jpeg';...

for(i = 0; i<doc_images.length; i++){
img = new Image()
img.src = doc_images[i];

When I open the document though the images are not preloaded. Is there anything else I need to do?


Jul 23rd, 2002, 11:24 PM
All a 'preloader' does is generate HTTP gets (requests) for the images it references; they still have to download, and the body of the document will be rendering all the while - unless you delay that somehow.

Jul 24th, 2002, 12:00 AM
That's what I thought would happen with my code. What actually happens is that the images are only downloaded when the rollover is triggered, which is what I was trying to avoid by preloading.

Have I misunderstood something here?


Jul 24th, 2002, 12:10 AM
Looks OK - but I'm guessing that what you've posted is a synopsis, not the actual code; e.g., 'path' - is that a variable name or the actual image directory? Paste in the actual preloader...

Jul 24th, 2002, 12:32 AM
As requested:

var nm_images = new Array();

nm_images[0] = 'image1.jpg';
nm_images[1] = 'image2.jpg';
nm_images[2] = 'image3.jpg';
nm_images[3] = 'image4.jpg';
nm_images[4] = 'image5.jpg';

//there are another 4 arrays like this one,
//each array has a loop like this:

var nm_tags = new Array();

for (i = 0; i<nm_images.length; i++){
img = new Image();
img.src = nm_images[i];
nm_tags[i] = "<img src=" + nm_images[i] +">";
}//end for loop

The rest of the script is functions to fade the images in and out, triggered by mouseover events. That bit works fine, it's only the preloading that's the problem. Waiting for each image to download spoils the transition somewhat. :rolleyes:

Could it be caused by browser settings (e.g. if the user can prevent images being cached)?

Jul 24th, 2002, 01:31 PM
This code is in an external file, that shouldn't make a difference should it?


Jul 24th, 2002, 08:34 PM
just an idea....

is this code in a function?

it needs to be inline, really.

try sticking some alerts in to check where your script is going, in case it is somehow not getting to the preload images.

just while i wrote this i thought of another idea, seems more likely...

the images are all preloaded into the same variable, img. if this is a local variable i.e. only defined inside the loop, the image will probably be deleted when each run the loop is complete. if it's a public variable i.e. defined outside the loops, all you're doing is repeatedly changing the same image's src. i recommend you make an array and set each item of the array as a new image like this:

var nm_tags = new Array();
var nm_preloads = new Array();

for (i = 0; i<nm_images.length; i++){
nm_preloads[i] = new Image();
nm_preloads[i].src = nm_images[i];
nm_tags[i] = "<img src=" + nm_images[i] +">";
}//end for loop

there are another 4 arrays like this one,
make sure the other sets of images have different names... obvious really...


Jul 24th, 2002, 08:42 PM
Function or top level, no difference (as long as you call the function in the same block). I don't thing the re-assignment of the variable is an issue - looking into it - as the only purpose of the Image object is to generate the HTTP request; presumably, its .src property isn't being used in a rollover script. Is this a browser-specific issue?

'External' files are simply read in, at the spot where the HTML tags are embedded - no difference.

Jul 24th, 2002, 09:31 PM
Thanks guys.

I've looked at other browsers, and the problem seems to be specific to IE. The way I'm testing the code is to have all the code and image files on a floppy disk, open the document, remove the disk (once it's stopped whirring, obviously) and then trigger the animation. This works in Mozilla. I've been to other sites with rollover tutorials to try the same test and their sites fail as well. One thing I've not tried is using the code on a different computer with IE, just in case it's specific to me.

I've also tried setting up arrays of Image() objects as neil.c suggested, but that hasn't solved it. Using alerts I've been able to establish that the code is being called, but the images aren't being summoned. Some of the tutorials I've looked at put the code in a function called by the onLoad event handler, but that hasn't worked for me either.

Thanks again,


I've now downloaded the page on another computer, and it seems to work OK, though it fails the floppy test. I'd guess from this that the problem is something to do with the network or other software. Any thoughts?

Philip M
Jul 27th, 2002, 10:27 AM
Bassleader -

I have exactly the same problem as you have, tried the same remedies, still no joy.

Anyone have any further thoughts?

Jul 27th, 2002, 12:26 PM
i think this is because of how IE works. it doesn't rely completely on the cache unless you tell it you are 'working offline'. so even if you have preloaded images or downloaded external script files, it likes to connect to the server, maybe just to check if the file is the same as the one it downloaded. for example, i recently tested an image slideshow in IE5, using images uploaded on the net. while i stayed online, IE preloaded the images and then opened them from cache when it needed them, without downloading again. but when my connection cut itself off (as it does occasionally), IE gave me image unavailable placeholders, even though the images were in cache. i guess this is because it tried to connect to the remote server to check that the files exist, or if they are the same version of the files - i don't know.

anyway, this is my guess why your floppy test fails. it treats the floppy as a remote server, file:///a:/, and even though the images are preloaded, it insists on checking they still exist before showing them. you might try doing a file > work offline before the test, but at any rate it should work if you upload the images.

any joy? :D

Jul 28th, 2002, 01:09 PM
I have a similar problem.
Works in Netscape not in IE. However, take a look at www.startrek.com in IE.
They have a menu on the left with mouseover effects. Run your mouse over them and they appear instantly. So IE will preload the images without having to check back with the server.

I have a similar script. www.flushbus.com but it wont work!!! (it wont pre-load)

This is totally baffling me and I don't think anyone has been able to solve this problem so if there are any JS masters out there please please solve this one.

Philip M
Jul 29th, 2002, 08:10 AM
I am bumping this up as the problem is still unresolved. My page works fine off-line (IE 5.5) but locks up when uploaded and run from the server.

Anyone can try it at


I have put alerts in this to show how it is working (or not!)

I guess several people would be very happy if a guru could have a look and offer advice.

I have just tried it again and it works partially. Is the problem that if the user clicks the NEXT button before the preload of the next image is completed then the preload is aborted?

Jul 29th, 2002, 08:38 AM
try setting to 'Automatically' in 'Check for newer versions of stored pages' setting. Maybe your current setting is 'Every visit to the page'

Jul 29th, 2002, 09:09 AM
I think neil.c nailed it on his first reply.


Jul 29th, 2002, 08:12 PM
The problem is definatly with IE's internet settings. It must be set to Automatic. I changed my settings from everypage to automatic and it works. Its funny that I've come across other sites that have pre-loaded images successfully with IE 's internet setting set to everypage. I checked the source code and there not doing anything funny. Are they somehow getting the browser to temporarily settings.

If you really want to verify what I'm got to www.startrek.com and mess with your temporary internet settings.