Preloading images.

[Vladdy]

There were a few posts lately regarding implementation of slide show scripts and image preloading, that bumped the completion of my slide show script a few notches up on my priorities list.
My usual approach is first to make sure code works in IE, 'cause the behaviour of Gecko browsers is much more predictable. However, it backfired this time...
I expected the following code to create an image element and than load the image data when I set the src attribute:

images[i]=document.createElement('img');
images[i].src=files[i];

and it did just that in IE. Having DSL, I did not catch right away that Gecko browsers do not load image data until the image element is appended to the document tree. Having display attribute of the image element or any encapsulating element set to none prevents Gecko from loading image data as well. So in order to have image loaded in Gecko the following has to happen:

images[i]=document.createElement('img');
document.getElementById('PlaceWhereImagesGo').appendChild(images[i]);
images[i].src=files[i];


Now the irony is that we are trying to get images in the memory (cache) without/before displaying them, and Gecko does not want to load images if it does not have to display them.
Certainly there are several ways to hide an element that "houses" the images, other than setting its display attribute to none. Just remember that IE does not like setting height to 0px at all :rolleyes: :rolleyes:

[mordred]

Just out of curiousity and admittedly because I'm to lazy to develop a test case by my own, do you experience the same unexpected behaviour in Gecko browsers if you change the preloading code to


var testImg = new Image();
testImg.src = files[i];
images[i]=document.createElement('img');
images[i].src= testImg.src;

[joh6nn]

i'm curious to know why you're not just using this:

images[i] = new Image();
images[i].src=files[i];