Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

December 1, 2008

19 Comments

Send Email Notifications for Broken Images Using jQuery Ajax

by in jQuery,Tips on December 1, 2008 @ 12:00 pm

David Walsh posted a priceless and overly useful post about Send Email Notifications for Broken Images Using MooTools Ajax but the only problem with that is that he used MooTools ;).

For those that want to do the same thing with jQuery here is the JavaScript code, please have a read at his post for the PHP code and any discussion his post sparks.

  1. $(document)
  2. .ready(function(){
  3.     $('img').error(function(){
  4.         $.post('ajax-image-error.php',{'image':this.src,'page':location.href});
  5.     });
  6. });

Yeah, I know, there is so much less code then the MooTools example, why is that? Psstt… because jQuery is better ;).

Here is a live demo (an email is not sent, but the returned data is appended to the page.

back to beginning of this post back to skip to links
Tags: , , ,

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

19 Responses to “Send Email Notifications for Broken Images Using jQuery Ajax”

Handy trick. Given that you’re detecting whether or not images have loaded correctly, shouldn’t you be doing this in $(window).load as oppoed to $(document).ready ?

You would think, but in this case, we are binding the error method to all images which needs to be done when the DOM is ready. If you wait to bind when the Window is fully loaded the error would most likely have pass already and the error method would never be invoked.

Hmm… Do you have a test page of this working?
I’m not catching an error event on image 404′s with your script.

Additionally I think this is a perfect candidate for event delegation. Depending on the number of IMG’s on a page, that event attachment could be pretty heavy. Hopefully the error event bubbles up, but since I can’t replicate this functionality I can’t see if we’d catch it at document or window.

Psstt… because jQuery is better ;).

indeed! :D

Paul, I posted a link to an example, there should be three bad images. I grabbed a few images from flickr to show a longer load time.

Can you explain what you mean by “event delegation”, are you saying do something like cache all the image errors and then send one request?

Paul, Just found this post http://icant.co.uk/sandbox/eventdelegation/ so I think I understand now what you are getting at. I don’t know the answer, but I think it would be worth a look at.

edit: this looks to be a good read also: http://www.danwebb.net/2008/2/.....-in-jquery

Looks like it’s not possible… Bummer

Here’s the code I tried:

$(document).error(function(evt){
if ($(evt.target).is(‘img’)){
$.post(‘brokenImages.php’,{‘image’:this.src,’page’:location.href}, function(data){
$(‘pre’).append(data);
});
}
});

(Yup thats a good overview page)

Thanks for following up on that, I was trying a few combination but no luck myself. When I do:

  1. $('*').error(function(evt){
  2.     console.log( evt );
  3. });

Part of the object that gets returned is “bubbles:false,” wonder if that is something in the browser or a jQuery thing. I will need to look in to it.

Yup good catch. Looks like it wont bubble up. That’s a shame.

Btw whats the syntax for code? source tag?

I am using http://blog.igeek.info/wp-plug.....x-hiliter/ so the syntax would be what language you are posting about for css, for javascript and so on. I am just realizing I don’t have that info anywhere for comments, need to fix that.

thanks.

Benjamin, you bastard! :)

I wrote a jQuery version I was going to post tomorrow morning! Way to ruin it!

I’ll post it some time in the future — please don’t be offended. Thanks for reading!

David

this seems like a bad idea to me. why not just grep your logfiles for errors and correct instead of waiting for pages to be viewed?

My bad David, I read your post and it got me all excited. Didn’t mean to steal your thunder, and really, I only get about 10 readers a day to my actual posts. All my other traffic is to my plugins so you can get away with posting with out anyone noticing dup content.

Anon, not sure what part of it is a bad idea, of course this is a bit of a proof-of-concept and there would need to be some dup checking, maybe a database or something. Not sure how you would set up grep the log files but if it is not instant then it will defeat the purpose. Imagine you post an article and you “think” you linked an image correctly. If you don’t have an instant notice process set up, you can go a whole day before you realize that image was never linked.

To followup anon’s comment, the set up could be something like this, running as a daemon: tail -f /var/log/apache/error_log | grep pattern | mail error@example.org

You can easily add a script between grep and mail to check for dupes.

There’s probably some kind of package available with that functionality and more.

Loïc, thanks for the input, I’ll have to look into that for myself as some point.

another jquery example
http://www.anieto2k.com/2008/1.....o-carguen/

Thanks for the link Jhon Doe

Trackbacks

  1. Informar sobre imágenes perdidas con jQuery | TortugaNinja.com - PHP, blogging, internet y mas
  2. [Web] ???? « ???????

Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

68 queries. 0.362 seconds. Powered by WordPress visitor stats