jquery - 在 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 的字符串，其中包含“url()”。这导致 ajax 调用在所有 url 上失败。我更改了它并仅对具有 css 背景的元素执行 ajax 调用。上面的代码现在可以完美运行了! :D