ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は alt_javascript トリックの代わりに onerror を使用してデフォルトの画像表示を設定します
JavaScript コード
//图像加载出错时的处理 function errorImg(img) { img.src = "默认图片.jpg"; img.onerror = null; }
HTML コード
<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />
見た目を美しくするため、ウェブページの画像が存在しない場合、クロス画像は表示されません
の場合 ページ表示時に画像が移動したり消失したりすると、ページ上に×印の画像が表示され、ユーザーエクスペリエンスに大きな影響を与えます。 alt属性を使って「○○の写真」というプロンプトメッセージを出してもあまり効果はありません。
実際、これは次のように処理できます。画像が存在しない場合、onerror イベントがトリガーされます。
1. この画像要素を非表示にします:
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>
2. デフォルトの画像に置き換えます:
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>注: 不適切に使用すると、IE ベースのブラウザで無限ループが発生します。例: [デフォルト画像の URL アドレス] の読み込みに失敗した場合 (ネットワーク速度が比較的遅い場合など)、または存在しない場合、繰り返し読み込みが行われ、最終的にはスタック オーバーフロー エラーが発生します。
したがって、問題を解決するには次の 2 つの方法を使用する必要があります:
a. エラー コードを他の処理方法に変更するか、デフォルトの画像が確実に使用されるようにします。 onerror は十分小さく、存在します。为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址;this.onerror=null'"/>テスト後、上記の方法は IE、Google、Firefox ブラウザーのすべてのバージョンでサポートされています。 上記は、JavaScript が alt_javascript テクニックの代わりに onerror を使用してデフォルトの画像表示を設定する方法です。さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。