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.