JQuery は Ajax を呼び出して画像をロードします-jsチュートリアル-php.cn

JQuery は Ajax を呼び出して画像をロードします

php中世界最好的语言

リリース： 2018-04-24 15:56:30

オリジナル

3412 人が閲覧しました

今回は、JQuery が Ajax を呼び出して画像をロードするための注意事項について説明します。以下は実際的なケースです。

最初に思い浮かぶアイデアは、キャッシュを使用することです。つまり、最初にプロンプトメッセージを表示し、取得が完了したら、コールバックして

img タグの src を変更します。取得したばかりでキャッシュがあるため、画像はすぐに表示されます。

ページ要素:

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

ログイン後にコピー

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

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

ログイン後にコピー

はすべての写真を記録するための配列PicArrを定義します

NextPicコンテンツ:

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

ログイン後にコピー

はCHROMEとFFでは正常に表示されますが、IE6、IE7、および8では異常に表示されますテストされていません。

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

コアコード:

$("img").attr("src",PicArr[CurrPic]) 
.bind(&#39;load&#39;,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でエラーが報告されます。

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(&#39;load&#39;,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" />
<p class="tip">正在加载……</p>
<p class="notice">
<img id="img"/>
</p>
</body>
</html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

バックグラウンドステップ呼び出しのjQuery+AJAX実装の詳細な説明