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 }}'

所以如果原始图像不存在则显示swatch 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列表作为数组
只要无法加载图片并且列表中有另一个图像，它将重复该过程
加载图片后，src

element

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

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

请注意，您可以（在网络上这意味着：您将）最终会尝试加载图片，这可以通过让服务器检查是否存在图片来防止

使用onError两次

1 个答案: