HTML: триггер onerror дважды, чтобы отобразить альтернативу альтернативного изображения

Question

Я в ситуации, когда знаю имя изображения, но не точное расширение. Расширение может быть .jpg или .png. Более того, само изображение может даже не существовать. Так что я должен выполнить следующее:

1. Попытка загрузить image.jpg
2. OnError, попытка загрузить image.png
3. OnError, дисплей notfound.jpg

Я написал следующий код:

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

Но «this.onerror = null» только останавливает onerror от перехода в бесконечный цикл. Как я могу загрузить альтернативу альтернативного изображения «notfound.jpg», когда снова запущен террор?

Answer 1

Здесь у меня есть то, что я сделал бы с помощью 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/

Answer 2

в возврате onerror false false после установки изображения src.

пример:

<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, вы можете просто запустить onerror небольшую функцию для проверки других изображений, и если они не загрузили отображение известного существующего изображения.