Menu
I’m finding IE9 handles the preloading of images differently to IE8 and FF4 and the latest versions of other browsers.
In IE9 the preloading still works ok unless I want to use the width or height properties of the created Image object before the src of the new Image has been assigned to an <img>
For example:
This code in the <head>
[CODE]
<script type=”text/javascript”>
var picData = [‘mypic1.jpg’,’mypic2.jpg’,’mypic3.jpg’,’mypic4.jpg’];
picO = new Array();
for(i=0; i < picData.length; i++){
picO[i] = new Image();
picO[i].src = picData[i];
}
window.onload=function(){
alert(picO[0].width+’ ‘+picO[0].height);
}
</script>
outputs ‘0 0’ in IE9 and ‘150 250’ in FF4 and the latest versions of the major browsers. 150 and 250 are the actual width and height of mypic1.jpg
Earlier versions of IE seem to work as FF4 does.
It appears that the window.onload event in IE9 does not take into account if all the images have completed downloading via the above FOR loop whereas FF4 and the others do.
The workaround I am using is to preload the images in hidden <img>’s at the top of the <body> and then loading them into an Image object to get the jpg’s actual width and height. This is working in IE9, FF4 and the other majors.
Have I missed or misunderstood something in the the way IE9 works?