Javascript 图像加载错误仅在某些情况下触发

我有一个分类风格的网站，每页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并没有初始化，但我的印象是。每个部分都能满足这个需求

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

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

但由于我的JavaScript在设计上是模块化的，所以我宁愿避免这种情况

---编辑---

我通过在OneError处理程序上插入内联脚本解决了这个问题。它不是非常优雅，但它可以工作，因为侦听器与src属性同时插入。而且它不依赖于jQuery

---

为了解决这个问题，我在前端代码中做了一些小改动，向窗口公开了一个函数。

在设置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>

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

标签上的
宽度
和
高度
用于显示如何保留尺寸

示例。
可能是超时问题吗？您是否尝试过将上述jQuery代码延迟一秒钟，以查看它是否能更好地识别错误？它是否真的应该是
.one（'error'，function（）
中的一个，而不是
。on（'error'，function（）
）？我得到的结果与.on（'error'）和.one（'error'）相同；顺便说一句，内联解决方案每次都能工作。当您使用模块化代码时，这只是糟糕的应用程序设计。您是否尝试将此代码放在文档就绪块中，以检查它是否能更好地处理错误（
$（function（）{}）
）？这是一个很好的方法，但会损害SEO，因为像素很可能是给定搜索引擎将看到的-但感谢提示。由于页面速度的提高，它不会损害SEO，但会促进SEO。谷歌it并检查最近的文章，而不是过时的旧东西。是的。这当然是事实。我已经做了一些更多的测试，我的问题是，那就是侦听器是在jQuery加载之前附加的，因此不会触发我的代码。