在 JavaScript/jQuery 中检测损坏的 CSS \"background-images\"答案

【问题标题】：Detecting Broken CSS "background-images" in JavaScript/jQuery在 JavaScript/jQuery 中检测损坏的 CSS \"background-images\"
【发布时间】：2023-01-20 01:03:41
【问题描述】：

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

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

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

【问题讨论】：

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

标签： jquery image detect broken-image

【解决方案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

【讨论】：

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

【解决方案2】：

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

【讨论】：

@ 不，我只有普通的网站空间 (1und1)：/