5

Javascriptを使用してHTML5キャンバスに画像を追加しています。

img = new Image(); 
img.addEventListener('load', loadCallBack, false);
img.src = image_url;

そしてloadCallBack、画像を描画します。

問題は、がimage_url壊れた画像または存在しない画像を参照する場合があることです。これが発生すると、コンソールで404エラーが発生し、キャンバス上の画像が白のままになります。src代わりに、画像の属性を別の属性に置き換えられるようにしたいと思いますimage_url。

次のことを試しましたが、機能しませんでした。

img.addEventListener("error", function(){console.log("404");});

画像の404を検出するにはどうすればよいですか？

注：これまでに投稿された2つはどちらも機能していないため、私はまだ解決策を探しています。

4

2 に答える 2

15

Kostiaの答えと同じコード：jQueryの醜さとバニラJavaScriptの美しさを比較するだけです：

function brokenImage() { ... }

img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";​
于 2012-09-06T22:11:24.980 に答える
4

私にとってはjQueryで動作します... http：//jsfiddle.net/5v2qG/

img = new Image(); 
$(img).bind('error', function () {
      alert('error called');                                                
});
img.src = "invalid_img_name.png";​
于 2012-09-06T20:06:24.017 に答える