2

我正在使用 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"); }));

但是没有事件被触发：-/

有任何想法吗？谢谢！

4

2 回答 2

3

如果使用 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];

小提琴

不知道img.file是为了什么，但我假设它是您尝试设置的 src 属性，并且也classList.add()没有最好的浏览器支持，并且似乎是一种将类添加到新创建的元素的奇怪方法，当img.className = 'obj'可用吗？

于 2013-02-24T00:22:34.780 回答
0

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

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

var hidebroken = function(){
    this.setAttribute('style', 'display:none !important');
}
于 2013-02-24T00:20:14.167 回答