IE下面Image.onload不调用原因

阅读更多

function AutoResizeImage(maxWidth,maxHeight,objImg){
			var img = new Image();
			//img.src = objImg.src;//如果放在onload前面则IE会先去读取图片缓存
			img.onload=function(){
				var hRatio;
				var wRatio;
				var Ratio = 1;
				var w = img.width;
				var h = img.height;
				wRatio = maxWidth / w;
				hRatio = maxHeight / h;
				if (maxWidth ==0 && maxHeight==0){
				Ratio = 1;
				}else if (maxWidth==0){//
				if (hRatio<1) Ratio = hRatio;
				}else if (maxHeight==0){
				if (wRatio<1) Ratio = wRatio;
				}else if (wRatio<1 || hRatio<1){
				Ratio = (wRatio<=hRatio?wRatio:hRatio);
				}
				if (Ratio<1){
				w = w * Ratio;
				h = h * Ratio;
				}
				objImg.height = h;
				objImg.width = w;
				objImg.style.marginLeft = (nextWidth-objImg.width)/2+'px';
				//objImg.style.marginTop = (nextHeight-objImg.height)/2+'px';
			}
			img.src = objImg.src;//放置在onload方法声明之后
		}

我把onload写到前面去，先告诉浏览器如何处理这张图片，再指定这张图片的源，这样就正常了。所以，不是IE没有触发onload事件，而是因为加载缓冲区的速度太快，以至于没有运行到img.onload的时候，onload事件已经触发了。这让我想到了Ajax，我们在写xmlhttp的时候，都是先指定onstatechange的回调函数，然后再send数据的，道理是一样的。由此也总结出了个规律，IE下面从缓存里加载出啦的图片是不执行onload事件的