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

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

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

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

ページ要素:

<input>
<p>正在加载……</p>
<p>
<img  src="/static/imghwm/default1.png" data-src="jquery/jquery-1.3.2.min.js" class="lazy" alt="JQuery は Ajax を呼び出して画像をロードします" >
</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('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でエラーが報告されます。

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

loadイベントは

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

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title>JQUERY动态加载图片</title>
<script></script>
<script>
(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>


<input>
<p>正在加载……</p>
<p>
<img  alt="JQuery は Ajax を呼び出して画像をロードします" >
</p>

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

推奨読書:

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

画像とテキストのチュートリアルAJAXの使用法の詳細な説明

以上がJQuery は Ajax を呼び出して画像をロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。