javascript - img タグ内の 400 エラーの検出と処理

Question

ユーザーの Facebook プロフィール写真 ( http://graph.facebook.com/(fb id)/picture ) を img タグ内に埋め込むアプリを開発しています。そして、それは機能します...ほとんどの場合。ただし、プロフィール写真をリクエストすると、400 エラーが発生することがあります (こちらを参照) 。

Javascript/JQuery でこれらの 400 エラーを検出する方法はありますか? 現在、それらは壊れた画像として表示されています....

Answer 1

onerrorこれは、イベントを使用して非常に簡単です。

JavaScript で新しい画像を作成し、それに と の 2 つのイベントを添付するだけonloadですonerror。次に、画像srcを設定すると、ブラウザが画像をダウンロードし、onloadそれが真の画像である場合はイベントを発生させ、そうでない場合はイベントを発生さonerrorせます。

var img = new Image();

// This URL will return an image an fire `onload`
img.src = 'http://placekitten.com/300/300';

// Replace the line above with this one to load a fake/unavailable image, which will fire the `onerror` event.
// img.src = 'http://mybrokenurl';

img.onload = function() {
    document.body.appendChild(img);
}

img.onerror = function() {
    alert('Error loading image');
}​

デモ: http://jsfiddle.net/amustill/vSJ4F/