Question

I am developing an app that embeds users’ Facebook profile picture(http://graph.facebook.com/(fb id)/picture) inside an img tag. And it works…for the most part. However I will occasionally get 400 errors when I request the profile picture(see this)

Is there any way I can detect these 400 errors with Javascript/JQuery? Right now they are being displayed as a broken image….

Answer 1

This is pretty simple using the onerror event.

We can simply create a new image in JavaScript and attach two events to it – onload and onerror. Then setting the image src will make the browser download the image, firing the onload event if it is a true image, or onerror if not.

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');
}​

Demo: http://jsfiddle.net/amustill/vSJ4F/