Question

我有一个分类风格的网站，每页50-100张图片，一次装满不同来源。有时我会得到一个404而我正试图处理它。

在包含图像的每个元素上，我都有这个脚本：

$el.find('img').one('error', function() {           
    console.log('broken image detected');
    // Replace broken image with something else
}).each(function() {
    if(this.complete || $(this).height() > 0){
        $(this).load();
    }
});

但它似乎是随机发射，而不是拾取所有404加载错误 - 特别是在页面的开头，其中没有检测到404。接近页面末尾看起来好一点。

发生了什么？

我应该补充一点，在整个DOM完成加载之前，这段JavaScript没有初始化，但我的印象是.each部分会迎合这个？

另一个想法是插入内联加载错误检测器：

<img src="http://example.com/image.jpg" onerror="window.errorHandler(this);">

但由于我的JavaScript设计模块化，我宁愿避免这种情况。

---编辑---

我通过在onerror处理程序上插入内联脚本解决了这个问题。它不是超级优雅，但它的工作原理是因为侦听器与src属性同时插入。它也不依赖于jQuery。

我已经在我的前端代码中做了一些小工作，以便通过向窗口公开函数来满足这一要求。

Answer 1

必须在设置img的src属性之前设置所有处理加载或错误事件的侦听器。

Answer 2

您可以在数据属性中实现延迟加载（即插入<img>路径，在src属性中放置假像素，并使用jQuery或JavaScript在DOM加载上加载实际图像）。那么你就不应该面对任何时间问题。

<强> HTML：

<div id="gallery">
  <img id="img1" 
       src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=" 
       data-src="imagethatgives404.gif"
       width="200" height="200">
  <img id="img2" 
       src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=" 
       data-src="http://static.jsbin.com/images/dave.min.svg"
       width="200" height="200">
</div>

<强> JS：

$(document).ready(function(){
   var $el = $('#gallery');

   $el.find('[data-src]')
      .one('error', function(e) {
         console.log(e.target.id + ' is broken');
         // Replace broken image with something else
      })
      .each(function(index,element){
         element.src = $(element).data('src');
      });
});

width标记上的height和<img>用于显示维度的维护方式。

示例here。

图像加载错误有时仅会触发

2 个答案: