使用 onError 两次

Question

如果第一个 onError 不存在，有没有办法使用两次 onError

<img class="media-object img-responsive" src="/img/product/{{ product_type_slug }}/thumb/{{ image_thumb }}" alt="{{ name }}"
onError="
this.onerror=null;
this.src='/img/product/swatch/{{ image }}';">

寻找 onError 以显示 onError：

src='/img/product/{{ product_type_slug }}/old/{{ image_thumb }}'

所以如果原始图像不存在则显示样本 url，如果不存在则显示旧图像。

Answer 1

您可以使用 javascript 函数来处理这种情况

function loadAlternative(element, list) {
  var image = new Image();

  image.onload = function() {
    element.src = this.src;
  }

  image.onerror = function() {
    if (list.length) {
      loadAlternative(element, list);
    }
  }

  //  pick off the first url in the list
  image.src = list.shift();
}

<img src="nope.jpg" 
     data-alternative="njet.jpg,neither.jpg,http://lorempixel.com/400/200/technics/1/" 
     onerror="loadAlternative(this, this.getAttribute('data-alternative').split(/,/))">

这是做什么的：

• 您设置了一个错误处理程序来加载替代图像
• 您在data-alternative 属性中以逗号分隔列表的形式提供备选方案
• 如果onerror被触发，则loadAlternative函数被调用，同时元素（img）和data-alternative列表作为数组
• 只要图片无法加载，列表中还有一张，就会重复这个过程
• 一旦加载图像，它将在element 上设置为src

---

如果您需要使用一些默认图像以防所有替代方案都失败，您可以修改image.onerror 函数来处理这样的空列表：

  image.onerror = function() {
    if (list.length) {
      loadAlternative(element, list);
    }
    else {
      element.src = '/every/other/option/has/failed.jpg';
    }
  }

---

请注意，您可能（在网络上这意味着：您将）最终会尝试大量加载图像，这可能会通过让服务器检查图像的存在来阻止.