jQuery または JavaScript を使用して Web ページ内の壊れた画像を効率的に処理するにはどうすればよいですか?

jQuery または JavaScript を使用した壊れた画像の処理

問題:
多数の画像を含む Web ページで壊れた画像が発生する画像インスタンスが利用できないため。

jQueryアプローチ:

1. 画像要素の取得: $("img").
2. 壊れた画像のフィルター: $brokenImages = $("img").filter(function( ) { return this.complete && !this.naturalWidth }).
3. 「src」プロパティを置き換えますプレースホルダー画像の場合: $brokenImages.attr("src", "/broken-image.png").

JavaScript onError イベント:

An別のアプローチには、各イメージの onError イベントを処理してソースを再割り当てすることが含まれます。

1. 画像エラー処理関数を定義します:

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

2. HTML で関数を利用します:

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

3. またはなし関数:

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

ブラウザ互換性:

onError イベント処理アプローチについては、次の互換性テーブルを参照してください:

http://www.quirksmode.org/dom/events/error.html

以上がjQuery または JavaScript を使用して Web ページ内の壊れた画像を効率的に処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。