壊れた画像を jQuery または JavaScript で置き換えるにはどうすればよいですか?

壊れた画像を jQuery または JavaScript で置き換える

Web ページは多くの場合画像に依存しており、画像が使用できなくなった場合の状況に対処することが重要ですそして壊れた画像が表示されます。この記事では、この問題に対処するための 2 つの方法、つまり jQuery ライブラリを使用する方法と純粋な JavaScript ソリューションを使用する方法について説明します。

jQuery アプローチ

当初このタスクでは jQuery アプローチが検討されましたが、それほど単純ではないことが証明されました。この目的で jQuery を使用するには、次の操作を行う必要があります。

• jQuery の $() を使用して画像セットを取得します。
• .filter() メソッドを使用して壊れた画像をフィルタリングします。
• 壊れた画像ソースを次のように置き換えます.attr().

純粋な JavaScript ソリューション

純粋な JavaScript を使用した代替アプローチは、よりシンプルで効率的です。画像の onError イベントを処理することで、そのソースを再割り当てできます:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onError="imgError(this);" />

または、関数なしでこれを実装できます:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

互換性考慮事項

ブラウザによるエラー機能のサポートは、 変化する。互換性の詳細については、元の回答で提供されているリファレンスを参照してください: http://www.quirksmode.org/dom/events/error.html

以上が壊れた画像を jQuery または JavaScript で置き換えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。