jQuery を使用して画像リンクの破損に対処する方法の具体的な実装手順

jQuery を使用して画像リンクの破損に対処する方法の具体的な実装手順_jquery。

WBOY

リリース： 2016-05-16 17:34:50

オリジナル

1260 人が閲覧しました

今日は、ページ開発のプロセスにおけるちょっとしたトリック、つまり、ひび割れた画像に対処する方法について説明します。
言い換えると、画像が正常に読み込まれない場合はどうなるでしょうか?
ステップ 1: HTML ページ内:

コードをコピーしますコードは次のとおりです:

🎜>< スクリプト src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">頭>

全員でこのページを実行すると、壊れた画像が表示されます。
パート 2: これは JavaScript であり、その機能は次のとおりです: 画像が壊れている場合、エラーメッセージがポップアップします:

コードをコピー

コードは次のとおりです:

$(function(){ $('img').error(function(){ alert('error') ; }); });

 
実行してください。 
パート 3: 次に、インターフェースの使いやすさを改善します。attr を呼び出して、この割れた画像をデフォルトの画像に置き換えることができます。 

Copyコード

コードは次のとおりです:

$(function(){ $('img').error(function(){ //alert('error'); $(this).attr('src','http://www.gbtags.com/gb/networks/主題/img/logohover.png'); 🎜>} ); });

 
オタクレーベルのロゴアイコンを見たことがありますか？このようにして、分割グラフの処理を実現することができる。 
 いくつか付け加えておきます: 実際、error の使用は jquery 1.8 より前に推奨されていましたが、jquery 1.9 以降はあまり推奨されませんでしたが、それでも使用でき、個人的には非常に便利だと思います。 
次のメソッドも使用できます: (エラーは on に置き換えられ、その後にパラメーターが続きます) 

コードをコピー

コードは次のとおりです。

$(function(){ $('img').on('error',function(){ alert('error'); $(this).attr('src','http://www.gbtags.com/gb/networks/主題/img/logohover.png'); }); ;

実際、前の error メソッドは on メソッドへのショートカットです 
 ちなみに、error メソッドをローカルでテストする場合は、サーバーを起動する必要があります。リソースが利用可能かどうかを確認する必要があります。たとえば、この test.html の場合、効果を確認するには、サーバーの起動後にブラウザに http://localhost:8080/test.html と入力する必要があります。 
第 3 四半期、皆さんのお役に立てれば幸いです。 