最近做WEB开发,一个图片浏览模块。为加强用户体验,我想采用图象载入显示状态方法,效果会比较好,这自然得用上Image对象的onload事件。
为了方便,我都是在FireFox上调试网页的。很好,没问题,一切正常!不过,当我把它转到IE下时却发现img的onload事件很多情况下都不被调用,结果图片显示不出来!
我最初的代码简化后如下:
我变花样来检测,IE根本不会理会,不过,偶尔还是会出现一两下子!
上网,查资料……
时间++
当时间==好大时
总算明白了,原理如下:
图片下载时,浏览器会把图片缓存起来,再次加载此图片时就会从缓冲区里加载。
那么如果图片已经在缓存区了,是不是从缓冲区里加载的图片就不触发onload事件呢?
测试……
OK,测试成功!
结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。
所以,不是IE不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。
反过来说,FF明显更智能一些,加入onload事件后,FF会检测缓冲区是否已经有此图片,有的话直接就触发此事件!
为了方便,我都是在FireFox上调试网页的。很好,没问题,一切正常!不过,当我把它转到IE下时却发现img的onload事件很多情况下都不被调用,结果图片显示不出来!
我最初的代码简化后如下:
var img = new Image(); img.src = "test.gif"; img.onload = function(){ alert(this.src); //other };呵呵,这代码貌似没什么问题吧,可是IE就是不认帐!!气死我了!
我变花样来检测,IE根本不会理会,不过,偶尔还是会出现一两下子!
上网,查资料……
时间++
当时间==好大时
总算明白了,原理如下:
图片下载时,浏览器会把图片缓存起来,再次加载此图片时就会从缓冲区里加载。
那么如果图片已经在缓存区了,是不是从缓冲区里加载的图片就不触发onload事件呢?
测试……
var img = new Image(); img.onload = function(){ alert(this.src); //other }; img.src = "test.gif";
OK,测试成功!
结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。
所以,不是IE不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。
反过来说,FF明显更智能一些,加入onload事件后,FF会检测缓冲区是否已经有此图片,有的话直接就触发此事件!