すべてのブラウザで onerror 属性を使用して画像読み込みエラーを処理する方法

onerror 属性を使用して画像読み込みエラーを処理する

画像を Web アプリケーションに組み込む場合、多くの場合、潜在的な読み込みエラーの処理が必要になります。 onerror 属性は、このようなエラーを適切に処理するための便利なソリューションを提供します。

Background

指定された HTML コードで説明されているように、onerror 属性は設定します。画像の読み込みプロセスでエラーが発生したときにスクリプトを実行するイベント リスナー。ただし、クエリで述べたように、このアプローチは Chrome や Mozilla などの特定のブラウザでは失敗する可能性があります。

解決策

ブラウザ間の互換性を確保するには、次の使用を検討してください。構文:

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

このコードは、プライマリ イメージのロードに失敗した場合に代替のフォールバック イメージを提供します。バックアップ URL も無効な場合の無限ループを防ぐために、コードは「this.onerror=null;」を使用してエラー ハンドラーを無効にします。

ライブ デモンストレーション

Anこのソリューションの対話型デモンストレーションは、次のリンクから入手できます:

• http://jsfiddle.net/oLqfxjoz/

追加の考慮事項

ソリューションで説明したように、このアプローチを使用すると、Chrome と Mozilla の両方で互換性が確保されます。ただし、画像読み込みエラーの処理はブラウザ環境によって異なる場合があることに注意することが重要です。

以上がすべてのブラウザで onerror 属性を使用して画像読み込みエラーを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。