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

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

Web ページに壊れた画像が表示されると、ユーザーはイライラすることがあります。幸いなことに、JavaScript にはこの問題を処理するためのさまざまな方法が用意されています。

1 つのアプローチは、jQuery のフィルタリング機能を利用して壊れた画像を特定し、置き換えることです。これを行うには:

1. jQuery の $("img") セレクターを使用して、ページ上のすべての画像を取得します。
2. .error() 関数を使用して画像セットをフィルターし、破損した画像を特定します。
3. 壊れたイメージごとに、src 属性を希望の置換イメージ (デフォルトの「イメージなし」など) に置き換えます。

ただし、簡単にするために、多くの場合、純粋な JavaScript を使用して壊れた画像を処理する方が簡単です。

JavaScript の解決策:

onError イベントは、画像が失敗したときにソース属性を再割り当てするために使用できます。 load:

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

この関数を HTML に実装します:

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

あるいは、onError イベントは関数を使用せずに HTML で直接処理できます:

<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 サイトの他の関連記事を参照してください。