在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 not found”页面？在这种情况下，您可以将其指向一个脚本，该脚本在请求的URL中查找.jpg / .png / .gif并相应地记录，然后向用户输出404页面。