Question

我使用js / jQuery将图像添加到我的网站，如下所示：

var img = document.createElement("img");
img.width = imgWidth;
img.file = fileList[i];
img.name = 'pic_' + i;
img.classList.add("obj");

但有时网址会被破坏，因为图片不存在。在这种情况下，我想隐藏破碎的图像。问题是我无法捕捉到错误事件......如果有的话。所有我看到的是这段代码的破碎图像：

<img width="200" src="php/upload.php?action=showPic&amp;newsId=239">

我尝试了几件事：

$("img").error(function () {
    alert("error");
});

或使用live：

$("img").live('load',(function() { console.log("image loaded correctly"); }));
$("img").live('error',(function() { console.log("image error"); }));

但没有事件被触发： - /

有什么想法吗？谢谢！

Answer 1

如果使用jQuery创建图像，则可以使用error（）函数：

$('<img />', {width  : imgWidth, 
              src    : fileList[i], 
              name   : 'pic_' + i, 
              'class': 'obj'
}).error(function() {
    $(this).hide();
}).appendTo('somewhere');

如果它是原生的JS元素，那么onerror函数就是这样的：

var img = document.createElement("img");
    img.width = imgWidth;
    img.name = 'pic_' + i;
    img.classList.add("obj");
    img.onerror = function() {
        this.style.display = 'none';
    }
    img.src = fileList[i];

FIDDLE

不确定img.file的用途，但我认为它是您尝试设置的src属性，而且classList.add()没有最好的浏览器支持，看起来像是当img.className = 'obj'可用时，将类添加到新创建的元素的奇怪方法？

Answer 2

创建图像DOM节点时，应附加一个onerror事件

...
img.name = 'pic_' + i;
img.onerror = hidebroken;
...

var hidebroken = function(){
    this.setAttribute('style', 'display:none !important');
}

jquery在出错时选择动态添加的图像

2 个答案: