Problem with Image.onload event firing too early in IE

[Adam Ratcliffe]

I'm trying to come up with a solution for detecting when an image,
loaded by a script, has completely loaded. The Image.onload event is
fired after the image has loaded in Firefox but before loading has
completed in Internet Explorer. The function where I assign the
onload event handler looks like this:

var newImage = new Image();

function getImage(url) {
var image = document.getElementById("theImg");
newImage.onload = swapImage;
newImage.src = url;
}

As an attempt at a work-around, in the event handler function
swapImage() I have the following code:

function swapImage() {
var image = document.getElementById("theMap");
if(newImage.complete) {
image.src = newImage.src;
} else {
setTimeout("swapImage()", 250);
}
}

Unfortunately the new image's 'complete' property is set to true prior
to the image fully loading leaving me no better off.

I wondered if this behaviour might be related to the server not
providing the Content-length response header but the headers for the
image seem to be in order:

HTTP/1.x 200 OK
Server: Apache-Coyote/1.1
X-Cocoon-Version: 2.1.6
Vary: Host
Last-Modified: Tue, 25 Jan 2005 11:46:27 GMT
Accept-Ranges: bytes
Content-Type: image/jpeg
Content-Length: 168667
Date: Tue, 25 Jan 2005 11:45:27 GMT

I've considered setting a fixed delay in the event handler if the
browser is IE but I'm not really happy with that approach as the size
of the image to be loaded can be quite variable. The user's internet
connection speed is also unknown.

I'd be very interested in hearing from anybody who has a resolution to
this problem.

Kind regards,
Adam

 

[adam]

I've resolved this issue. The problem was not as I thought, related to
the behaviour of the onload event, but rather to a failure of IE to
cache the preloaded image. This meant that when the original image's
src attribute was modified to that of the new image there was no image
to load from the cache so a new request was made to the server.

The reason the image was not cached is the 'Vary' response header sent
by the application server (Apache Cocoon). This header is a directive
specifying which request headers are to be used in addition to the
request URI in determining if a suitable match exists in the cache. IE
will _not_ cache responses containing the Vary header unless the field
specified is the "User-Agent" field. For more detail on this issue
see: http://lists.over.net/pipermail/mod_gzip/2002-December/006826.html

Removing the 'Vary' header results in the preloaded images being cached
correctly and the code works as expected.

Cheers
Adam