javascript - jquery 选择动态添加的图片出错

Question

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

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

但是有时候url会因为图片不存在而被破坏。在这种情况下，我想隐藏损坏的图像。问题是我无法捕获 onerror 事件......如果有的话。我所看到的只是带有此代码的损坏图像:

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

我尝试了一些事情:

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

或直播:

$("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' 可用时，将类添加到新创建的元素似乎是一种奇怪的方式？