我的目标是检查图像是否已成功加载。它在现代浏览器中运行良好,但IE8或7是一个可怕的问题。以下是示例代码:
var img = new Image(),
url = 'http://something.com/images/something.gif';
$(img).attr('src', url).load(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
}
else {
alert('successfully loaded');
}
}
任何人都有任何想法解决这个问题?谢谢你的推荐!
答案 0 :(得分:13)
您需要在设置onload
值之前设置.src
处理程序。
在某些版本的IE中,如果图像位于浏览器缓存中,则在设置.src
值时将立即触发加载事件。如果您的装载处理程序尚未到位,您将错过该事件。
此外,旧版IE中不支持naturalWidth
和naturalHeight
,因此它们始终未定义。而且,您应该使用onerror
和onabort
来捕获错误条件。
没有必要为此使用jQuery。你可以这样做:
var img = new Image(),
img.onload = function() {
alert("loaded successfully");
}
img.onerror = img.onabort = function() {
alert("broken image");
}
// only set .src AFTER event handlers are in place
img.src = 'http://something.com/images/something.gif';
答案 1 :(得分:3)
如果图像被破坏,则不会触发onload
事件,而是会触发onerror
事件。所以你需要这样做:
var img = new Image(),
url = 'http://something.com/images/something.gif';
img.onload = function() {
alert('successfully loaded');
};
img.onerror = function() {
alert('broken image!');
};
$(img).attr('src', url);
或者使用jQuery:
$(img).load(function() {
alert('successfully loaded');
}).error(function() {
alert('broken image!');
}).attr('src', url);
答案 2 :(得分:1)
var url="http://something.com/images/something.gif",
img=new Image;
img.onload=img.onerror=function(ev){
if(ev.type=="load")alert("successfully loaded");
else if(ev.type=="error")alert("error loading");
}
img.src=url;
// If image is cached then no `onload` or `onerror` can occur.
if(img.complete){
alert("successfully loaded");
img.onload=img.onerror=null;
}