onerror 画像置換コードが Chrome と Mozilla で失敗するのはなぜですか?

イメージの onerror 属性の使用

onerror 属性は、イメージをロードできないときに実行するアクションを指定します。この場合、src 属性を変更し、問題のあるイメージをデフォルトのイメージに置き換えるコードを提供しました。

ただし、このコードは、IE では機能しても、Chrome と Mozilla では機能しないという問題が発生しました。

その答えは、onerror ハンドラーで提供されたバックアップ URL も無効な場合、最新のブラウザーがエラー イベントを複数回トリガーするという事実にあります。イベントが繰り返し発生し、src 属性が変更され続けるため、これにより無限ループが発生します。

これに対処するには、コードを次のように変更できます。

<img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';">

By this.onerror=null を設定すると、エラー イベントが再度トリガーされなくなります。これにより、イメージが際限なく置き換えられることがなくなります。

実装を視覚化するには、http://jsfiddle.net/oLqfxjoz/ のライブ デモを参照することもできます。

以上がonerror 画像置換コードが Chrome と Mozilla で失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。