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>

You will get an error in tools like Firebug if you try to load a broken image — user920041
– user920041, Commented Oct 22, 2012 at 9:29
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. — Peter
– Peter, Commented Oct 22, 2012 at 9:43

WizzHead · Accepted Answer · 2012-10-22 14:21:20Z

5

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

edited Oct 22, 2012 at 14:21

answered Oct 22, 2012 at 9:32

WizzHead

1509 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jeroen Over a year ago

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

WizzHead Over a year ago

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.

Peter Over a year ago

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

WizzHead Over a year ago

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 :)

Jan Over a year ago

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

|

Jan · Accepted Answer · 2012-10-22 13:39:55Z

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.

answered Oct 22, 2012 at 13:39

Jan

5,8573 gold badges29 silver badges44 bronze badges

1 Comment

Peter Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related