JavaScript は alt_javascript トリックの代わりに onerror を使用してデフォルトの画像表示を設定します-jsチュートリアル-php.cn

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

PHP中文网

リリース： 2016-05-16 15:12:59

オリジナル

1541 人が閲覧しました

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 サイト (m.sbmmt.com) に注目してください。