Das Beispiel in diesem Artikel beschreibt, wie JQuery das Ajax-Laden von Bildern implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Ich lerne kürzlich JQuery und möchte das Prinzip des Durchsuchens des Fotoalbums ohne Aktualisierung simulieren.
Die erste Idee, die mir in den Sinn kommt, ist, den Cache zu verwenden, d wurde gerade abgerufen und es gibt einen Cache, das Bild wird sofort angezeigt.
Seitenelemente:
<input class="picbtn" type="button" value="Next" /> <div class="tip">正在加载……</div> <div class="notice"> <img /> </div>
Button-Ereignisbindung:
Nächster Bildinhalt:
$(".tip").slideDown(200); //显示提示 $.get(PicArr[CurrPic],function(){ $("img").attr("src",PicArr[CurrPic]); $(".tip").slideUp(200); CurrPic++; if(CurrPic>4) CurrPic=0; });
Die Anzeige ist unter CHROME und FF normal, unter IE7 und 8 wurde jedoch keine Auffälligkeit festgestellt.
Später wurde mit Hilfe des ASPRAIN-Entwicklers Ji Shancao die Idee geändert, zuerst src zu ändern, dann das Onload-Ereignis zu binden und Onload erneut aufzurufen.
Kerncode:
$("img").attr("src",PicArr[CurrPic]) .bind('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});
Später sah ich, dass es im Grunde normal war, aber wenn ich genau hinschaute, war es immer noch ungewöhnlich. Nach längerem Verfolgen stellte ich fest, dass die Rückruffunktion mehrmals ausgeführt wurde.
Ich dachte, es könnte ein Problem mit der Ereignisbindung sein, da die Bindung des Onclick-Ereignisses
ist
Überprüfen Sie den von Jishancao angegebenen Code noch einmal und finden Sie heraus, wo das Problem liegt.
Das Ladeereignis ist an eine anonyme Funktion gebunden und wird beim Drücken der Taste erneut gebunden, sodass es wiederholt ausgeführt wird. Also habe ich die Bindung auf eins geändert und es war erledigt. Der endgültige vollständige Code lautet wie folgt:
<!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>
Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.