Send Email Notifications for Broken Images Using jQuery AJAX

By  on  

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.

Recent Features

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Editable Content Using MooTools 1.2, PHP, and MySQL

    Everybody and their aerobics instructor wants to be able to edit their own website these days. And why wouldn't they? I mean, they have a $500 budget, no HTML/CSS experience, and extraordinary expectations. Enough ranting though. Having a website that allows for...

  • By
    Drag & Drop Elements to the Trash with MooTools 1.2

    Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's...

Discussion

  1. 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

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

    Great post!

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

  4. Louis W

    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.

  5. Great !!!

  6. revive

    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

  7. It is probably good to also note this jQuery coed needs to go within your HTML head element for it to correctly work.

  8. Paul

    Maybe its just me, but I think this is a really poor idea. Why check for broken images on client-side, its just lazy development. You have web logs, just grep them for any image which returns 404.

    Even if you think its a good idea, you should not use this code. Its vunerable to email injection meaning spammers can use it to completely replace the From address, and the full message body, and start sending you spam via your own PHP code.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!