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

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

壊れた画像は Web ページの美しさを損ない、ユーザーに不完全な、または視覚的に魅力のないエクスペリエンスを残す可能性があります。幸いなことに、jQuery と JavaScript は、この問題を適切に処理するツールを提供します。

jQuery のアプローチ

最初は壊れた画像を管理するために jQuery を使用することを検討するかもしれませんが、JavaScript はより簡単な、より効果的な解決策。各画像の onError イベントを処理することで、画像の読み込みに失敗した場合にソースを再割り当てできます。

JavaScript ソリューション

以下の JavaScript コード スニペットは、画像の onError イベントをキャプチャしています。 image 要素。その src 属性を更新してプレースホルダー画像を表示します (例: "noimage.gif").

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

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

または、別の JavaScript 関数を使用せずに、より簡潔な構文を使用することもできます。

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

互換性

以下の表は、壊れたエラーを処理するためのエラー機能をサポートするブラウザのリストです。画像:

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

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