关于IE中image的onload事件失效解决问题
发布时间：2018-10-03 18:20:04 所属栏目：创业 来源：站长网
导读：这两天做一个简单的图片查看器，其中用到了上一页和下一页，加载图片的时候用new Image()，然后设置image的src属性，在Google Chrome / Opera /FireFox中一切正常；代码如下： Copy to Clipboard 引用的内容：[www.veryhuo.com]var i = new Image(); i.src
|
这两天做一个简单的图片查看器，其中用到了“上一页”和“下一页”，加载图片的时候用new Image()，然后设置image的src属性，在Google Chrome/Opera/FireFox中一切正常；代码如下： Copy to Clipboard 引用的内容：[www.veryhuo.com]
var i = new Image(); i.src = _this.settings.imgs[_this.currIndex]; //baidu.dom.show(baidu.dom.query(selectPre+'#loading')[0]); i.onload = function(){ image.src = i.src; baidu.dom.hide(baidu.dom.query(selectPre+'#loading')[0]); baidu.dom.query('#'+_this.settings.formId+' .title')[0].innerHTML = i.src.replace(/(.*/)/ig,'') + ' - '+_this.settings.title; } 测试结果：
可是到了IE8/IE7中，问题出现了：当所有图片一次翻完或者刷新浏览器后，点击后图片就 不显示了，下面是刷新后的结果(红色的图片是loading图标)：
难道是Image对象的onload失效了?当我试图在onload事件中弹出对话框时，IE中无效，也就证实了onload事件没有发生。网上搜索了下资料： IE在再次显示图片的时候不是从服务器发来的图片，而是从缓存中获取上次缓存的，这样从缓存中加载的速度是很快的，所以还没有运行到onload的时候，onload事件已经触发了，这就导致onload事件中的代码无法执行了。 既然这样，那我们就可以把onload事件函数写到给src赋值的语句前面，这样就解决了问题，代码如下： Copy to Clipboard 引用的内容：[www.veryhuo.com]
var i = new Image(); //baidu.dom.show(baidu.dom.query(selectPre+'#loading')[0]); i.onload = function(){ image.src = i.src; //baidu.dom.hide(baidu.dom.query(selectPre+'#loading')[0]); //baidu.dom.query('#'+_this.settings.formId+' .title')[0].innerHTML = i.src.replace(/(.*/)/ig,'') + ' - '+_this.settings.title; } i.src = _this.settings.imgs[_this.currIndex]; （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
