Question

我处在一种我知道图像名称的情况，但不知道确切的扩展名。扩展名可以是.jpg或.png。此外，图像本身甚至可能不存在。所以我必须执行以下操作：

尝试加载image.jpg
Onerror，尝试加载image.png
Onerror，显示notfound.jpg

我写了以下代码：

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

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

Answer 1

在设置图像src后，onerror中的

返回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 btw。不是说它不正确，只是不太理想。如果你没有使用内联js，你可能只是让错误运行一个小函数来检查其他图像，如果他们没有加载显示已知的存在图像。

Answer 2

在这里，我将使用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/

HTML：触发onerror两次以显示备用图像的备用

2 个答案: