在 JavaScript/jQuery 中检测损坏的 CSS“背景图像”答案

【问题标题】：Detecting Broken CSS "background-images" in JavaScript/jQuery在 JavaScript/jQuery 中检测损坏的 CSS“背景图像”
【发布时间】：2012-10-22 09:12:13
【问题描述】：

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

但是是否可以检测到损坏的背景图像？
例如：

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

【问题讨论】：

如果您尝试加载损坏的图像，则会在 Firebug 等工具中出现错误
我知道，我知道。我尝试构建一个修复脚本。如果用户打开带有损坏图像的页面 -> 将 pageUrl（或 post id）插入特殊的 mySql-DB。

标签： jquery image detect brokenimage

【解决方案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()"。这导致所有 url 上的 ajax 调用失败。我更改了它并仅对具有 css 背景的元素执行 ajax 调用。上面的代码现在可以完美运行了！ :D

【讨论】：

我认为 OP 正在寻找一种脚本解决方案来自动执行后续操作。
我不知道为什么jsfiddle说即使正确的背景图像也有错误。但我在我的服务器上对其进行了测试，它工作正常。在 Firebug 中，jsfiddle 说请求没问题，但仍然有错误。这只能与他们的 API 有关。请改为在您的网站上尝试。
我的页面上相同：/ ...问题可能是跨站点请求？
我还没有测试过这个链接，但看起来它可以工作：james.padolsey.com/javascript/cross-domain-requests-with-jquery。去他的 github 并演示他的插件。让我知道:)
强迫用户下载图片两次让你检查你的网站是否有损坏的链接有点邪恶。

【解决方案2】：

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

【讨论】：

@不，我只有正常的网络空间（1und1）：/