I will run a slideshow of still images while a video plays.

After the document has loaded, an onload handler (on the body element) is run in which I then preload all the images into an array. The image width is then resized down to 500 pixels (aspect ratio maintained).

In Firefox and Chrome, this behaves as expected. In IE9, it works but I have to compute the aspect ratio and set the height too.

In IE8 (and likely earlier), nothing works! In assigning imgObj.src which loads the image from the URL, the height and width never get set properly; their values remain 0. In examining the Image object in IE8 using a debugger, there are naturalHeight and naturalWidth properties, but they seem not to be readable!

Thinking that it was a problem of asynchronous continuation of script execution, I added an onload handler to the Image object so as to get the image width and height. The problem is still not fixed. The script as it exists now is given below.


Code:
function docPostLoadTasks() {  // the body element onload handler
/*
  .
  .
  .
*/
// the images loading coding here
	for (i = 0; i < numberOfImages ; i++) {
		img = new Image();
		img.alt = altDescriptions[i];
		idx = "0";
		if (i < 9)
			idx += i + 1;
		else
			idx = i + 1
		img.onload = function () {
			finalizeImage(img);
		};
		img.src = "imgDocumentName" + idx + ".jpg";
	}
/*
  .
  .
  .
*/
}

function finalizeImage(img) {  // the image object onload handler
	var imageHeight;
/*   this code commented out because it did not work
	if (img.naturalHeight && img.naturalHeight > 0)
		imageHeight = img.naturalHeight;
	else if (img.height && img.height > 0)
		imageHeight = img.height;
	if (img.naturalWidth && img.naturalWidth > 0)
		imageWidth = img.naturalWidth;
	else if (img.width && img.width > 0)
		imageWidth = img.width;
*/

// reset the image width to 500 pixels, maintaining aspect
//  calculation of height not really necessary for Firefox and Chrome
//     but seems necessary for IE9 at least

	imageHeight = 500 * img.height / img.width;
	img.style.width = "500px";
	img.style.height = Math.floor(imageHeight) + "px";
	evtInfo.preloadedImages.push(img);

// evtInfo is an object in document (global) scope 
//  with property preloadedImages that is an array for storing the image objects
}