Send Email Notifications for Broken Images Using jQuery Ajax

Written by David Walsh on Friday, December 12, 2008

It’s usually best to repair broken image paths as soon as possible because they can damage a website’s credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken images.

The PHP

if(isset($_POST['image']))
{
	$to = 'errors@yourdomain.com';
	$from = 'automailer@yourdomain.com';
	$subject = 'Broken Image';
	$content = "The website is signaling a broken image!\n\nBroken Image Path:  ".stripslashes($_POST['image'])."\n\nReferenced on Page:  ".stripslashes($_POST['page']);
	$result = mail($to,$subject,$content,'From: '.$from."\r\n");
	die($result);
}

I keep the email short and to the point; it contains the broken image’s src attribute and the page it was requested by.

The jQuery Javascript

$(document).ready(function() {
	$('img').error(function() {
		$.post('ajax-image-error-jquery.php', { 
			image: $(this).attr('src'), 
			page: window.location.href 
		}, function() { 
			//hide the image? 
		});
	});
});

For every image, we listen for the error event. When a broken image is discovered, an Ajax request is sent to the above PHP script.

Of course, if the page experiences high traffic before you can fix the image path, you’ll have quite a few emails. You may prefer to store the error in a database table and check that often.

Follow via RSS Epic Discussion

December 12 / #

Binny V A says:

Thanks! I am not going to use this for finding broken images – but I was looking for the ‘error’ event. I had a requirement to hide a message if an image is invalid – and I forgot about the error event. Thanks for the reminder

December 13 / #

Crispijn says:

Does Mootools also has this error event? I’ve searched the moodocs but I couldn’t find anything about a error event.

Great post!

December 15 / #

trs21219 says:

hmm nice little trick here… ill be sure to put this in the book of code for later use! thanks again :)

December 16 / #

Louis W says:

Nice little post! This is something I had never even considered but it seems like it would come in quite handy. I love it when there is such a simple and elegant solution for a problem.

June 15 / #

mescript says:

Great !!!

July 17 / #

revive says:

This is great.. we currently use a customized 404 page scripted in PHP to alert us of these items (even though the user may never see the 404 page for a missing image, the 404 error triggers the email).. great for dev purposes and has also proved invaluable for finding those long lost link-backs to pages that no longer exist! Makes it super easy to 301 redirect those old links and get the users to the correct spot !! Cheers

Be Heard!

I want to hear what you have to say! Share your comments and questions below.

Feeds & Profiles

Sponsors

Tutorials & Topics

Script & Style Tweets