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 に答える