Javascript: document.images[].complete not working in IE

Question

I have a slide show that has been working for a long time. I am updating the site to XHTML transitional, and now the slide show is not working in IE 9.

It seems the problem is that the "complete" function is not working. The following code gets the slide show started (this is called after the page loads):

function Initialize() {
    document.images["carImg"].src = imgList[0];
    if (document.getElementById) {
        theLink = document.getElementById("linkTo");
        theLink.href = imgURL[0];
    }
    if (document.images["carImg"].complete) SetTheInterval();
    else setTimeout("Initialize()", 1000);
}

document.images["carImg"].complete always resolves to false, and so it calls Initialize every second. The image imgList[0] is loaded, because it is showing up. But the complete property is not being set.

If I comment out the if (document.images["carImg"].complete) conditional, and just call SetTheInterval(), the slide show works.

It also works in Firefox (with the conditional). It also works if I set IE 9 to "compatibility view" (though then other things look weird).

Does anyone know why the "complete" property is not getting set in IE 9? Has something changed?

UPDATE: It seems complete is only not working on the first image. For subsequent images, complete is set when the image is loaded.

Answer 1

I'm not sure this is the best answer, but time is a-wasting and it works.

The problem was, I had set the initial src for the image tag to spacer.gif (in HTML). Thus the complete property for the image was true when the Initialize routine was executed.

However, when I reset the src property -- in javascript -- to the first image in the image list, the complete property became false. I am not sure why. Subsequent to that, changing the src property to another image in the image list did set the complete property to true.

It was this way in both IE9 and Chrome, but not in Firefox. Go figure. So instead of setting the src of the image to spacer.gif, I read the javascript file containing the list of image names in the code-behind (C#) and set the initial src property of the image tag to the first image. Now it works.

FWIW, I did try using onerror in the image tag, but no error came up.

Sheesh. I am not fond of javascript.

Answer 2

Try seeing if there is an onload or an error event, it may be that even resetting the src makes a 'dirty' image that is not instantly complete, even if the image exists.

I hadn't noticed this before, but in IE10 (don't have 9) you need the onload event. When the onload fires, complete is true, but as soon as you write to the img src it is false again. You could also set the src just once, and just check complete in the timeout.

And without the onload handler, even after the image appears, the timer goes on forever...

window.ready=function(){
    var img= document.images[0];
    img.onload= function(){
        clearTimeout(ready.timer);
        alert('onload called, img.complete= '+img.complete);              
    };
        // temporary error handler, if needed
        img.onerror=function(e){              
               clearTimeout(ready.timer);
               alert('Error!\n'+e.message || e);
        };
       // set the new src
    img.src= Memry.Rte+'art/sundrag.gif';
    if(!img.complete) ready.timer=setTimeout(window.ready, 300);
    else alert('complete');
}
ready()