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

今日は、ページ開発のプロセスにおけるちょっとしたトリック、つまり、ひび割れた画像に対処する方法について説明します。
言い換えると、画像が正常に読み込まれない場合はどうなるでしょうか?
ステップ 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 四半期、皆さんのお役に立てれば幸いです。