Detecting Broken CSS "background-images" in JavaScript/jQuery

Question

Here is an example to detect broken Images
http://maisonbisson.com/blog/post/12150/detecting-broken-images-in-javascript/

but is it possible to detect an broken background-image?
For exmaple:

<div style="background-image:url('http://myimage.de/image.png');"></div>

Gooseherd

You will get an error in tools like Firebug if you try to load a broken image – Herr

I know, i know. I try to build a fix script. If the user open a page with a broken image -> insert the pageUrl (or post id) into a special mySql-DB. – Gooseherd

Answer 1

Do you have control over the "404 not found" page on your server? In that case you could point it to a script that looks for .jpg/.png/.gif in the requested URL and log accordingly, then outputting a 404 page to the user.

Hoarsen

@ No, i have normal Webspace only (1und1) :/ – Gooseherd

Answer 2

I dont think you need to have jQuery or javascript to tell you whether a link is broken. Use Firebug in Firefox and it will sort out most of your problems:

https://addons.mozilla.org/en-us/firefox/addon/firebug/

Edit: Now that I know that it was for an auto fix, i quickly had a look at it and came up with this:

var imageURLs = $('div');
imageURLs.each(function(index, element){
    var imageURL = $(element).css('background-image').replace('url("', '').replace('")', '');
    if (imageURL != "none"){
        $.ajax({
           url: imageURL,
           type: 'HEAD',
           error: function(){
              //error handling for broken image url
           }
        });
    }
});

Add that to your page after it has loaded and it will scan all div elements for any broken css background images. There might be a better or quicker way to do this but this is the general idea.

Edit 2: I noticed when i tested the script that .css('background-image') returns a string with "url()" enclosing the image url. This resulted in the ajax call failing on all urls. I changed it and actioned ajax calls on only elements which has css backgrounds. The above code now works perfect! :D

Scirrhus

I think the OP is looking for an script-solution to automate follow-up actions. – Morez

I don't know why jsfiddle says that even the correct background image has an error. But i tested it on my server and it works fine. In Firebug, jsfiddle says that the request was ok, but still has an error. It can only be something to do with their API. Try on your website instead. – Scirrhus

Same on my page :/ ... the problem is maybe the cross site requests? – Gooseherd

I haven't tested this link, but it looks like it might work: james.padolsey.com/javascript/cross-domain-requests-with-jquery. Go to his github and demo his plugin. Let me know :) – Scirrhus

Forcing the user to download the images twice for you to bugcheck your site for broken links is kindof evil. – Hoarsen

@james Does not work. I dont know why, but jquery can't recognize the 404. – Gooseherd

@Hoarsen this may be bad for production, but is useful for automated testing. – Ratib