檢測並處理img標籤中的400個錯誤

Question

我正在開發一個將用戶的Facebook個人資料圖片（http://graph.facebook.com/(fb id）/圖片嵌入img標籤中的應用程序。它的作用......大部分。然而，當我請求個人資料圖片時，我偶爾會得到400個錯誤（see this）

有沒有什麼辦法可以用Javascript/JQuery檢測這400個錯誤？現在他們正在被顯示爲一個破碎的圖像....

Answer 1

這很簡單，使用onerror事件。

我們可以簡單地在JavaScript中創建一個新圖像並將兩個事件附加到它上面 - 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/