检测图像 URL 是否损坏 JQUERY答案

【问题标题】：detect if image URL is broken or not JQUERY检测图像 URL 是否损坏 JQUERY
【发布时间】：2015-04-02 23:26:35
【问题描述】：

有没有办法从其 URL 中检测图像 URL 是否损坏，比如我想检查此图像是否加载：

http://www.domain.com/img/slide1.jpg

仅来自 URL，而不来自 html 代码

谢谢

【问题讨论】：

检查这个：stackoverflow.com/questions/3381663/…

标签： javascript jquery

【解决方案1】：

为了检查当前可用的 URL，您可以使用 HEAD HTTP 请求（即不加载请求正文）。它在这个HTTP HEAD Request in Javascript/Ajax? 问题中描述。

【讨论】：

【解决方案2】：

使用onerror 处理程序。但是，必须在触发错误之前附加它，因此您要在之后设置src属性：

$("img").error(function(){
  $(this).hide();
}).attr('src', 'http://www.domain.com/img/slide1.jpg');

https://api.jquery.com/error/

【讨论】：

来自他们的文档：必须在浏览器触发错误事件之前附加事件处理程序，这就是示例在附加处理程序后设置 src 属性的原因。此外，当页面在本地提供时，错误事件可能不会正确触发； error 依赖于 HTTP 状态码，如果 URL 使用 file: 协议一般不会触发。
实际上，在 Chrome 中用于本地文件时，它似乎对我有用。
我刚刚发布了文档以使答案完整。一些浏览器有这样的问题，而另一些则没有（Chrome 似乎经常做得很好）。

【解决方案3】：

我认为这是一种选择......

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

这也可以触发一个函数。

你也可以试试这样的...

<object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
  <img src="http://stackoverflow.com/content/img/so/logo.png" />
</object>

由于第一张图片不存在，因此将显示备用图片（Stack Overflow 徽标）。如果您使用的是不支持对象的非常旧的浏览器，它将忽略该标签并使用 img 标签。

更新：

使用图片路径（URL），试试这样的...

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

通过 ajax 预加载可能会给出答案，然后您可以使用成功/错误处理。

【讨论】：