Question

在控制台中，我有180个无法加载资源，我需要获取这些资源的列表，以便我可以使用图像URL向网站管理员发送报告。怎么办呢？

Answer 1

只要在图像开始加载之前设置事件侦听器，就可以轻松跟踪无法加载的图像。像这样：

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

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

见这个例子：

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

如果需要，您可以设置MutationObserver事件以观察动态添加的任何新<img>元素，并在那里设置错误事件。但它不适用于所有浏览器。

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

Answer 2

如果您可以向页面添加脚本，则可以将处理程序绑定到error事件并跟踪所有故障：

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

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

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

工作示例：http://jsbin.com/iboyik/3

如果要在已加载的页面上获取所有失败的图像，这有点棘手。我能够通过重新加载所有图像来做到这一点：

(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);
})();

工作示例：http://jsbin.com/iboyik/2

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

2 个答案: