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属性来检查图像是否已加载。如果为 0，则表示尚未加载。但是没有办法知道图像是否真的无法加载或者只是需要很长时间，比如网络连接速度很慢。我想如果你有另一种方法可以知道页面和所有图像是否真的完成加载，比如在页面load事件之后或者你愿意设置一个很长的超时时间，你可以使用它。

Answer 2

If you can add a script to the page, you can bind a handler to the error event and track all failures:

$(function(){
  var errorImages = [];

  $('img').on('error', function(){
                errorImages.push(this.src);
              });

  $(window).on('load', function(){
    alert(errorImages);
  });
});

Working example: http://jsbin.com/iboyik/3

If you want to get all failed images on a page that is already loaded, that is a little trickier. I was able to do that by reloading all images:

(function(){
  var errorImages = [];
  $('img')
    .on('error', function(){
                    errorImages.push(this.src);
                 })
    .prop('src', function(i, src){return src;});
  // wait for all images to fail (bit of a hack)
  setTimeout(function(){alert(errorImages);}, 1000);
})();

Working example: http://jsbin.com/iboyik/2