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

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

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

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

ページ要素:

4a9db50b40e39eca75cbc99c2c312d9f
4210fe3935aaf62d0282b34d795cabaf正在加载……94b3e26ee717c64999d7867364b1b4a3
ff8c108d65d523a809fb6ace59384e83
959ca913a624e25b2223e504f10f3326
94b3e26ee717c64999d7867364b1b4a3

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

$(".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に変更して完了です。最終的な完全なコードは次のとおりです:

0d8422d5a748d838d5911bbec5723448
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
b2386ffb911b14667cb8f0f91ea547a7JQUERY动态加载图片6e916e0f7d1e588d4f442bf645aedb2f
044d7161605f615a3151a8dfc16550092cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
(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();});
})
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
4a9db50b40e39eca75cbc99c2c312d9f
4210fe3935aaf62d0282b34d795cabaf正在加载……94b3e26ee717c64999d7867364b1b4a3
ff8c108d65d523a809fb6ace59384e83
6b8f78aabd1c9dd3c316942cb62a24ee
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

推奨読書:

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

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

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