javascript - 检测和处理img标签内的400个错误

Question

我正在开发一个将用户的 Facebook 个人资料图片 ( http://graph.facebook.com/(fb id)/picture) 嵌入到 img 标签中的应用程序。它的工作原理......在大多数情况下。但是，当我请求个人资料图片时，偶尔会出现 400 错误（请参阅此）

有什么方法可以用 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/