图像加载不适用于 IE 8 或更低版本

Image load not working with IE 8 or lower

本文关键字：版本 IE 加载 不适用 适用于 图像      更新时间：2023-09-26

我的目标是检查图像是否已成功加载。它在现代浏览器中运行良好，但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');
        }
    }

有人有任何想法来解决这个问题吗？谢谢你！

在设置.src值之前，您必须设置onload处理程序。

在某些版本的 IE 中，如果图像位于浏览器缓存中，则在设置 .src 值时将立即触发 load 事件。 如果负载处理程序尚未到位，您将错过该事件。

此外，旧版本的 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';

如果映像损坏，则不会触发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);

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;
}
相关文章：