JQuery は、images_jquery をロードする Ajax メソッドを実装します-jsチュートリアル-php.cn

JQuery は、images_jquery をロードする Ajax メソッドを実装します

WBOY

リリース： 2016-05-16 15:23:44

オリジナル

1519 人が閲覧しました

この記事の例では、JQuery が画像の Ajax 読み込みを実装する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

私は最近 JQuery を学習しており、更新せずにフォトアルバムを閲覧する原理をシミュレートしたいと考えています。

最初に思い浮かぶのは、キャッシュを使用することです。つまり、最初にプロンプトメッセージを表示し、取得が完了したら、コールバックして img タグの src を変更します。取得したばかりでキャッシュがある場合、画像はすぐに表示されます。

ページ要素:

<input class="picbtn" type="button" value="Next" />
<div class="tip">正在加载……</div>
<div class="notice">
<img />
</div>

ログイン後にコピー

ボタンイベントバインディング:

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

$(".picbtn").click(function(){NextPic (); });

すべての写真を記録するために配列 PicArr が定義されています

次の写真コンテンツ:

$(".tip").slideDown(200); //显示提示
$.get(PicArr[CurrPic],function(){
$("img").attr("src",PicArr[CurrPic]);
$(".tip").slideUp(200);
CurrPic++;
if(CurrPic>4)
CurrPic=0;
});

ログイン後にコピー

CHROME と FF では正常に表示されますが、IE7 と 8 では表示が異常になります。

その後、ASPRAIN 開発者 Ji Shancao の助けにより、最初に src を変更し、次に onload イベントをバインドして、onload でコールバックするというアイデアに変更されました。

コアコード:

$("img").attr("src",PicArr[CurrPic]) 
.bind('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});

ログイン後にコピー

後で確認すると、基本的には正常でしたが、よく見ると、やはり異常で、長時間追跡していると、コールバック関数が複数回実行されることがわかりました。

onclick イベントのバインディングが
なので、イベントバインディングに問題があるのではないかと思いました。

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

$(Element).bind("click",callback)

と省略できます

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

$(Element).click(callback)

$(Element) について考えてみます。 .bind("load",callback) と $(Element).load(url,callback) は同じでしょうか？変更して試してみましたが、明確な情報が見つかりませんでした。ただし、Chrome と FF では IE では動作しますが、データは正常ではなく、IE ではエラーが報告されます。

Jishancao から提供されたコードをもう一度確認して、問題がどこにあるかを見つけてください。

loadイベントは無名関数にバインドされており、ボタンを押すと再度バインドされるので繰り返し実行されます。そこでバインディングのバインドを1に変更して完了です。最終的な完全なコードは次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQUERY动态加载图片</title>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
(function($){
$.NextPic=function()
{
$(".tip").slideDown(200);
$("img").attr("src",PicArr[CurrPic]).one('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});
//$("img").load(PicArr[CurrPic],function(){$(this).attr("src",PicArr[CurrPic]);$(".tip").slideUp(200);alert(CurrPic);CurrPic++;if(CurrPic>4)CurrPic=0;});
}
})(jQuery);
$(document).ready(function(){
PicArr = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");
CurrPic=0;
$(".tip").css({"position":"absolute","top":"100px","left":"50px"});
$(".tip").hide();
$(".scoll").click(function(){$.NextPic();});
})
</script>
</head>
<body>
<input class="picbtn" type="button" value="Next" />
<div class="tip">正在加载……</div>
<div class="notice">
<img id="img"/>
</div>
</body>
</html>

ログイン後にコピー

この記事が jQuery プログラミングのすべての人に役立つことを願っています。