在JavaScript/jQuery中检测破碎的CSS"background-images"

Question

这是一个检测破碎图像的例子
http://maisonbisson.com/blog/post/12150/detecting-broken-images-in-javascript/

但是有可能检测出破碎的背景图像吗？
例如:

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

Answer 1

我不认为你需要有jQuery或javascript来告诉你链接是否被破坏.在Firefox中使用Firebug,它将解决您的大多数问题:

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

编辑: 现在我知道这是一个自动修复,我很快看了一眼,然后想出了这个:

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
           }
        });
    }
});

加载后将其添加到页面中,它将扫描所有div元素以查找任何损坏的CSS背景图像.可能有更好或更快的方法来做到这一点,但这是一般的想法.

编辑2:当我测试脚本时,我注意到.css('background-image')返回一个字符串,其中包含图片网址的"url()".这导致所有网址上的ajax调用失败.我更改了它并仅对具有css背景的元素执行ajax调用.上面的代码现在完美无缺!:d

Answer 2

您可以控制服务器上的“404 未找到”页面吗？在这种情况下，您可以将其指向一个脚本，该脚本在请求的 URL 中查找 .jpg/.png/.gif 并相应地记录，然后向用户输出 404 页面。