Preloading Images: Problem in IE only

Question

The following Code Works in every browser accept every version of IE, can someone please help! There seems to be a problem with the cat.onload method....I have done so many tests and am at a loss...any help would be appreciated

Thanks!

var bannerCount = 0;
var bannerImgsArr = new Array();
bannerImgsArr[0] ='image1.jpg';
bannerImgsArr[1] ='image2.jpg';
bannerImgsArr[2] ='image3.jpg';
bannerImgsArr[3] ='image4.jpg';

$(document).ready(function() {
  preloadBannerImages();
});

function preloadBannerImages(){
    //create new image object
    var cat = new Image();

    //give Image src attribute the image file name
    cat.src =bannerImgsArr[bannerCount];

    //if the counter represents the last image in the current gallery enter here: 
    if(bannerCount == 3){

        //When the image has been loaded the following function is exicuted 
        cat.onload = function() {
            //Removes the LOADING message hard coded into the html page;
            document.getElementById("bigbox").removeChild(document.getElementById("loading"));
        }

    }else{

        //when current image is finished loading increments the img index and 
        //calls the loading function again for the next image in the gallery

        bannerCount++;
        cat.onload =preloadBannerImages;

    }
}

What exactly doesn't work? What errors do you get? – Pekka May 30 '11 at 23:06 — Pekka, May 30 '11 at 23:06

score 1 · Answer 1 · answered May 30 '11 at 23:08

1

You are defining the onload handler for the image after setting the src property. Do the one before the other.

If that doesn't solve your problem, you really need to elaborate what exactly doesn't work.

answered May 30 '11 at 23:08

Pekka

442,112
142
972
1,088

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

[edit]

The function most likely ends and calls itself again before the image is downloaded, so the image isn't cached. Load the images into a persistent store (e.g. array) that hangs around until they are all downlaoded and cached.

[/edit]

You don't have to wait for the DOM to be ready to load images:

var bannerCount = 0;
var bannerImgsArr = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg'];
var imageArray = [];

for (var i=0, iLen=bannerImgsArr.length; i<iLen; i++) {
  imageArray[i]  = new Image();
  imageArray[i].src = bannerImgsArr[i];
}

Now when the DOM is ready, you can use one of the preloaded images.

...
cat.src = imageArr[bannerCount].src;
...

edited Jun 20 '20 at 09:12

Community

1
1

answered May 30 '11 at 23:08

RobG

142,382
31
172
209

Did you miss the `var cat = new Image();` – Gabriele Petrioli May 30 '11 at 23:15
It's irrelevant, the images are never stored. Having the function call itself using onload is equivalent to a loop. A reference to the created *image* object is never kept so IE (probably) doesn't bother to finish downloading it. So a reference to each *image* object must be kept at least until the image finished downloading. And there is no need for recursive calling, the images can be downloaded in parallel. There is no need wait for the load event of one before attempting to load the next, the browser will handle that. – RobG May 30 '11 at 23:31
no need to store them.. once they have loaded they are cached by the browser and can be used instantly. The whole idea of the OP is to wait for images to load (*images that start loading after the dom is ready*) so he can remove the loading progress image. He **wants** to load the images after the DOM is loaded, and wants to know when **all** dynamic images have completed loading. – Gabriele Petrioli May 31 '11 at 01:03

score 0 · Answer 3 · answered May 30 '11 at 23:32

0

Don't rely on the onload-event of images, it may not fire if the image was loaded before and comes from the cache

answered May 30 '11 at 23:32

Dr.Molle

116,463
16
195
201

Preloading Images: Problem in IE only

3 Answers3

[edit]

[/edit]