画像の「onerror」属性が Chrome と Mozilla で異なる動作をするのはなぜですか?

Onerror 属性による画像読み込みの問題の解決

Web 開発では、リンク切れやサーバー エラーが原因で画像の読み込みに失敗するシナリオによく遭遇します。 img 要素の onerror 属性を使用すると、表示する代替画像を指定することで、このような状況に対処できます。ただし、特に Chrome と Mozilla など、さまざまなブラウザ間でその機能に一貫性がないことがユーザーから報告されています。

問題を説明するために、次のコード スニペットを考えてみましょう。

<code class="html"><img src="invalid_image.jpg" onerror="this.src='alternate_image.jpg';"></code>

このコードは、次のことを試みています。無効なソースから画像をロードします。イメージのロードに失敗した場合は、onerror ハンドラーがトリガーされ、壊れたイメージが指定された代替イメージに置き換えられます。ただし、ユーザーは、このアプローチが Internet Explorer 以外のブラウザーでは機能しないことに気づきました。

この動作の根本的な理由は、ブラウザーが onerror イベントを異なる方法で処理することです。 Chrome や Mozilla などの一部のブラウザでは、代替画像の読み込みに失敗するとイベントが複数回トリガーされ、無限ループが発生します。これを防ぐには、次の修正コードを使用して、最初の試行後に onerror ハンドラーを無効にする必要があります:

<code class="html"><img src="invalid_image.jpg" onerror="this.onerror=null;this.src='alternate_image.jpg';"></code>

onerror ハンドラーを無効にすることで、イベントが 1 回だけトリガーされるようになり、無限ループが防止されます。 。このアプローチは、Chrome、Mozilla、Internet Explorer などの複数のブラウザーで一貫して機能します。

以上が画像の「onerror」属性が Chrome と Mozilla で異なる動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。