画像要素の onerror 属性がブラウザ間で一貫性のない動作をするのはなぜですか?

画像要素の onerror 属性の使用

HTML では、onerror 属性を使用して、画像が失敗したときに実行するアクションを指定できます。ロードします。ただし、この属性は特定のブラウザでは常に期待どおりに機能するとは限らないことが観察されています。

提供された例では、壊れた画像のソースを変更するために onerror 属性が使用されており、動作はブラウザによって異なります。 。この問題に対処するには、アプローチを変更する必要があります。

以下の更新されたコード スニペットは、IE との互換性を維持しながら Chrome と Mozilla の問題を解決します。

<code class="css">.posting-logo-div {
}
.posting-logo-img {
  height: 120px;
  width: 120px;
}
.posting-photo-div {
  height: 5px;
  width: 5px;
  position: relative;
  top: -140px;
  left: 648px;
}
.posting-photo-img {
  height: 240px;
  width: 240px;
}</code>

<code class="html"><div id="image" class="posting-logo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
   class="posting-logo-img"
  />
</div>
<div id="photo" class="posting-photo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
       class="posting-photo-img"
  />
</div></code>

this.onerror=null を使用する onerror ハンドラー。画像のソースを変更する前に、バックアップ URL も無効な場合に発生する可能性のある無限ループを防ぐことができます。

このアプローチのライブ デモンストレーションは、http://jsfiddle.net/oLqfxjoz/ でご覧いただけます。

以上が画像要素の onerror 属性がブラウザ間で一貫性のない動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。