javascript - 如何使用 Javascript 获取损坏的图像列表？

Question

在控制台中，我有 180 个未能加载资源，我需要获取这些资源的列表，以便我可以将包含图像 URL 的报告发送给网站管理员。如何做到这一点？

Answer 1

只要在图像开始加载之前设置事件监听器，您就可以轻松跟踪加载失败的图像。像这样:

img.addEventListener('error', function() {
  //report failed image
}, false);

如果您的所有图像都加载到 <img> 中html 中的标签，您可以在脚本中为所有这些标签设置一个错误事件。只需确保设置它的脚本放在 img 标签之后，但不要在页面加载事件或 DOMContentLoaded 中运行设置。因为您可能已经错过了一些错误事件，而且为时已晚。

看这个例子:

http://jsbin.com/ekiram/2/edit

如果你愿意，你可以设置一个MutationObserver关注任何新事件<img>元素动态添加并在那里设置错误事件。但它不适用于所有浏览器。

您可以通过查看 naturalWidth 来检查图像是否已加载。属性(property)。如果为 0，则表示尚未加载。但是没有办法知道图像是否真的加载失败，或者只是需要很长时间，比如网络连接速度慢。我想你可以使用它，如果你有另一种方法来知道页面和所有图像是否真的加载完毕，比如在页面 load 之后事件或者如果您愿意设置很长的超时时间。