我们都知道onload事件是在img加载完成后触发的事件,但是ie下这个onload事件并没有想像中的灵,特别是在ie7/ie6下,网上的解释是ie因为缓存关系造成的img.onload事
件没有被激发,因为ie这个东西喜欢异步,所以由缓存的问题,网页获取到图片的时间极短(应该比代码解释的时间快)所以造成了onload事件被错过了。
网上一般的说法是把onload事件写在src赋值之前可以解决这个onload事件不被触发的问题,但是,实际上如果对于多图片来说,这个方法其实不太
灵。即把下面代码:
var image = new Image(); image.src = "xxx.jpg"; image.onload = function() { document.getElementById("img").src = image.src; }
改成
var image = new Image(); image.onload = function() { document.getElementById("img").src = image.src; } image.src = "xxx.jpg";
实际证明,这样子改可以改善部分情况,但是不是万试万灵的。特别是在做多图片异步加载时,这个onload事件不被触发的可能性太高了。于是在网上又看了一堆资料,发现image有一个叫complete属性,这个属性表示图片是否已经加载完成了,如果加载完成为true,未完成为false,有了这个属性就可以写一个定时检查方法,从而堵上ie的这个bug。以下是我写的一段代码:
obj.find(".proBox > .image > a > img").each(function() { //遍历图片,检查是否需要加载图片 if ($(this).attr("status") == "unload" || $(this).attr("status") == "") { //未加载的图片 var realSrc = $(this).attr("real"); var target = this; //建立一个可以给image.onload函数调用的对象 var image = new Image(); image.onload = function complete() { //加载完成 $(target).attr("status", "loaded"); //加载完成 } function check() { //ie7下显示bug的修复 if (image.complete) { complete(); } else { setTimeout(function() { check(); }, 500); //每隔0.5秒检查一次 } } if (document.all) { check(); } image.src = realSrc; $(target).attr("status", "loading"); //加载中 } });
为了让图片的真实路径在网页加载完成后再异步加载,所以有很多图片都要用到onload事件,但是在不加check()方法前,ie7下总是有几个图片没办法显示出来,但是加上我现在写的check方法。网页显示正常了。
不过,我突然间由ie的js这么喜欢异步的问题想到,其实不用img.complete属性也是可以在ie下正常触发img.onload事
件的,就利用ie最喜欢的异步方式,我只要推后解决onload事件就可以了,即把image.src=”xxx.jpg”用setTimoute推迟
0.1-0.5秒就可以了,这样子ie就可以先解释到onload事件,再去请求图片了,就不怕因为缓存问题造成图片显示不全了,于是代码修改如下:
dobj.find(".proBox > .image > a > img").each(function() { //遍历图片,检查是否需要加载图片 if ($(this).attr("status") == "unload" || $(this).attr("status") == "") { //未加载的图片 var realSrc = $(this).attr("real"); var target = this; //建立一个可以给image.onload函数调用的对象 var image = new Image(); image.onload = function complete() { //加载完成 $(target).attr("status", "loaded"); //加载完成 } /*function check(){//ie7下显示bug的修复 if(image.complete){ complete(); }else{ setTimeout(function(){check();},500);//每隔0.5秒检查一次 } } if(document.all){check();}*/ setTimeout(function() { image.src = realSrc; }, 300); $(target).attr("status", "loading"); //加载中 } });
实验证明,我的猜想是正确的。不过,原来的complete还是暂时保留。