HTML：触发onerror两次以显示替代图像的替代

我处于一种情况，我知道图像的名称，但不是确切的扩展名。扩展名可以是.jpg或.png。此外，图像本身可能不存在。所以，我必须执行以下操作：HTML：触发onerror两次以显示替代图像的替代

尝试加载image.jpg的
ONERROR，试图加载image.png
ONERROR，显示notfound.jpg

我写以下代码：

<img src=image.jpg onerror="this.onerror=null; this.src=image.png;">

但是“this.onerror = null”只会停止进入无限循环的错误。当再次触发onerror时，如何加载替代图像“notfound.jpg”的替代方法？

来源

2013-06-01 mrclutch31

你可以使用jQuery吗？ –

在这里，我有我会使用jQuery的。我问你是否可以，你没有回复。

所以它就是这样。

这里将是标准的HTML：

<img src=image.jpg alt="" />

这里将jQuery的连接到它：

$('img').on('error', function() { 
    var $this = $(this); 
    // ajax with type 'HEAD' checks to see if the file exists 
    $.ajax({ 
     url: 'image.png', //place alternate img link here 
     type: 'HEAD', 
     success: function() { 
      //if success place alternate image url into image 
      $this.prop('src', 'image.png'); 
     }, 
     error: function() { 
      //if error place notfound image url into image 
      $this.prop('src', 'notfound.jpg'); 
     } 
    }); 
});

在这里，我有它在不同的环境中工作，但它显示了终端产品： http://jsfiddle.net/6nFdr/

来源

2013-06-01 19:18:40

谢谢！我试图避免jquery，但似乎这是唯一的选择。 – mrclutch31

onerror设置图像src后返回false。

例如：

<img src="fake.png" onerror="this.src='http://www.gravatar.com/avatar/9950cb3a6bdc0e10b1260135bd145e77?s=32&d=identicon&r=PG'; return false;">

演示：http://jsfiddle.net/rlemon/SKtVg/

你应该避免内联JavaScript顺便说一句。不是说这是不正确的，只是不太需要。如果你没有使用内联js，你可能只会有一个小函数来检查其他图像，如果它们没有加载显示已知存在的图像。

来源

2013-06-01 18:17:36 rlemon

你能解释这是如何帮助吗？如何显示“notfound.jpg”？ – mrclutch31

HTML：触发onerror两次以显示替代图像的替代

回答

相关问题