检测破碎CSS“背景图片”在JavaScript/jQuery的

下面是一个例子检测损坏的图片
http://maisonbisson.com/blog/post/12150/detecting-broken-images-in-javascript/检测破碎CSS“背景图片”在JavaScript/jQuery的

，但它能够检测破碎的背景图像？
对于〔实施例：

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

来源

2012-10-22 Peter

如果您尝试加载损坏的图像，您将在Firebug等工具中出现错误 – 2012-10-22 09:29:00

我知道，我知道。我尝试构建一个修复脚本。如果用户使用损坏的图像打开页面 - >将pageUrl（或发布ID）插入到特殊的mySql-DB中。 – Peter

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

来源

2012-10-22 13:39:55 Jan

@不，我只有普通的Webspace（1und1）：/ – Peter

你确定吗？ http://www.google.se/#q=%221und1%22+eigene+404 – Jan

我不认为你需要拥有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 
      } 
     }); 
    } 
});

是添加到您的网页已加载后，它会扫描任何破CSS背景图像的所有div元素。可能有更好或更快的方法来做到这一点，但这是一般的想法。

编辑2：我注意到当我测试脚本.css（'background-image'）返回一个字符串“url（）”包含图像的URL。这导致所有url上的ajax调用失败。我改变了它，并且只对具有CSS背景的元素执行了ajax调用。上面的代码现在完美了！：D

来源

2012-10-22 09:32:12 WizzHead

我认为OP正在寻找一个脚本解决方案来自动执行后续行动。 – Jeroen

http://jsfiddle.net/PbNfX/ < - 没有工作？ ...奇怪的OO – Peter

我不知道为什么jsfiddle说，即使正确的背景图像有错误。但我测试了它在我的服务器上，它工作正常。在Firebug中，jsfiddle说这个请求没问题，但仍然有错误。它只能与他们的API有关。请尝试在您的网站上。 – WizzHead

检测破碎CSS“背景图片”在JavaScript/jQuery的

回答

相关问题