Image preloading not working in IE?

[dense13]

I have a simple image preload script:

var imgArr = ['i1.gif', 'i2.gif', 'i3.gif'];
var img;
for (var i=0, l=imgArr.length ; i<l ; i++) {
    img = new Image();
    img.src = imgArr[i];
}

It seems to work fine, but not in IE6/Win. I go to check the Temporary Internet Files folder, and the images don't seem to be preloading.

But if I add an alert statement after img.src=..., then they do preload!

Is there anything wrong in the code?

[SwordsmanX]

Image preloading should not be done with javascript, you're much better off using css and loading a non-existant #id with a background-image you want to preload

[dense13]

Image preloading should not be done with javascript, you're much better off using css and loading a non-existant #id with a background-image you want to preload

That depends on the situation. In this case, the images will only be used by JS-enabled browsers, so using JS is the best option, imo.

In addition, the preloaded image list is generated via PHP, so using CSS would be a bit complicated. Of course I could generate a <style> block dynamically... Anyway, JS this time.

I agree that for rollovers and similar things CSS-preloading is generally a better solution.

[SwordsmanX]

Wel then maybe you have to actually insert the img node into the DOM and not just create it? Might be wrong tho :/

[dense13]

Wel then maybe you have to actually insert the img node into the DOM and not just create it? Might be wrong tho :/

Thanks Kendothpro. Maybe, but as far as I know this is all is needed. I think the code basically is correct (adding the alert makes it work fine in IE, and in FF it works fine from the beginning). I was hoping someone has experienced the same situation and knows what's going on.

Maybe the problem is only when running it in my local machine, and it would work fine once uploaded.

If anyone has any tips or ideas about this, they'll be more than welcome.

[Pepejeria]

Code looks good. Though you are re-assigning each image to the img variable. How will you later access these preloaded images?

[dense13]

Code looks good. Though you are re-assigning each image to the img variable. How will you later access these preloaded images?

All I need is their src attribute, which is already in imgArr. I tried to store them in an array to see if that influenced the preloading in IE but it made no difference.

Maybe it is preloading them, and it just seems to not be doing it in my local machine, for some other reason... Oh well, I think I'll forget about this, if worse comes to worse, IE users will have to wait a bit longer. I'll just add a 'get firefox button' somewhere near.