Lazysizes断网场景下图片加载失败替换为src指定图片的实现方案咨询

我来帮你搞定这个问题！你之前遇到的无限循环触发error事件的原因很明确：当Lazysizes把data-src里的真实图片地址赋值给src后，一旦加载失败，你的代码又把src设为当前的src（也就是那个失败的真实地址），这就导致错误反复触发，进入死循环。

下面是可行的解决方案，分两步走：

第一步：修改HTML，添加 fallback 地址的存储 #

我们需要把初始的占位图地址单独存在一个自定义属性里，这样即使Lazysizes修改了src，我们也能拿到原始的占位图：

<div class="image">
  <a href="<?php echo $product['href']; ?>">
    <img src="<?php echo $preloader?>" 
         data-src="<?php echo $product['thumb']; ?>" 
         data-fallback="<?php echo $preloader?>" <!-- 新增这个属性存占位图 -->
         alt="<?php echo $product['name']; ?>" 
         title="<?php echo $product['name']; ?>" 
         class="img-responsive lazyload" />
  </a>
</div>

第二步：优化JavaScript监听逻辑 #

推荐使用Lazysizes原生的lazyerror事件（专门针对懒加载图片的错误事件，比全局error更精准），同时添加标记避免重复处理：

document.addEventListener('lazyerror', function(e) {
  const img = e.target;
  // 仅处理未替换过fallback的图片
  if (!img.dataset.hasFallback) {
    const fallbackSrc = img.getAttribute('data-fallback');
    if (fallbackSrc) {
      // 标记已处理，防止重复触发
      img.dataset.hasFallback = 'true';
      // 移除lazyload类，阻止Lazysizes继续尝试加载该图片
      img.classList.remove('lazyload');
      // 清除data-src避免后续干扰
      img.removeAttribute('data-src');
      // 替换为占位图
      img.src = fallbackSrc;
    }
  }
});

为什么这个方案能解决问题？ #

1. 避免循环：我们用data-fallback保存原始占位图地址，不再重复设置失败的真实图片地址；
2. 精准监听：lazyerror只触发在Lazysizes处理的懒加载图片上，不会干扰其他图片；
3. 终止后续尝试：移除lazyload类后，Lazysizes不会再对这个图片进行任何加载操作，彻底避免重复错误。

如果你坚持要用全局error事件，也可以调整判断逻辑，确保只处理懒加载图片且未替换过的情况：

document.addEventListener('error', function(e) {
  const target = e.target;
  if (target.nodeName === 'IMG' && target.classList.contains('lazyload') && !target.dataset.hasFallback) {
    target.dataset.hasFallback = 'true';
    const fallbackSrc = target.getAttribute('data-fallback');
    if (fallbackSrc) {
      target.classList.remove('lazyload');
      target.removeAttribute('data-src');
      target.src = fallbackSrc;
    }
  }
}, true);

内容的提问来源于stack exchange，提问作者user16462554