ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は alt_javascript トリックの代わりに onerror を使用してデフォルトの画像表示を設定します

JavaScript は alt_javascript トリックの代わりに onerror を使用してデフォルトの画像表示を設定します

PHP中文网
PHP中文网オリジナル
2016-05-16 15:12:591528ブラウズ

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=&#39;none&#39;"/>

2. デフォルトの画像に置き換えます:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src=&#39;默认图片的url地址&#39;"/>

注: 不適切に使用すると、IE ベースのブラウザで無限ループが発生します。例: [デフォルト画像の URL アドレス] の読み込みに失敗した場合 (ネットワーク速度が比較的遅い場合など)、または存在しない場合、繰り返し読み込みが行われ、最終的にはスタック オーバーフロー エラーが発生します。

したがって、問題を解決するには次の 2 つの方法を使用する必要があります:

a. エラー コードを他の処理方法に変更するか、デフォルトの画像が確実に使用されるようにします。 onerror は十分小さく、存在します。


b. onerror イベントが 1 回だけトリガーされるように制御するには、次の文を追加する必要があります: this.onerror=null; 追加後は次のようになります。 >


为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src=&#39;默认图片的url地址;this.onerror=null&#39;"/>
テスト後、上記の方法は IE、Google、Firefox ブラウザーのすべてのバージョンでサポートされています。

上記は、JavaScript が alt_javascript テクニックの代わりに onerror を使用してデフォルトの画像表示を設定する方法です。さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。