JQuery implementiert die Ajax-Methode zum Laden von images

JQuery implementiert die Ajax-Methode zum Laden von images_jquery

WBOY

Freigeben： 2016-05-16 15:23:44

Original

1519 Leute haben es durchsucht

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>

Nach dem Login kopieren

Button-Ereignisbindung:

Code kopieren Der Code lautet wie folgt:

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

Ein Array PicArr ist definiert, um alle Bilder

aufzuzeichnen

Nächster Bildinhalt:

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

Nach dem Login kopieren

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;});

Nach dem Login kopieren

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

Code kopieren Der Code lautet wie folgt:

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

kann abgekürzt werden in

Code kopieren Der Code lautet wie folgt:

$(Element).click(callback)

Denken Sie an $(Element) Werden .bind("load",callback) und $(Element).load(url,callback) gleich sein? Ich konnte die Informationen nicht eindeutig finden und habe es versucht. aber es ist immer noch anders. Aber in Chrome und ff kann es immer noch unter IE funktionieren, aber die Daten sind nicht normal und unter IE wird ein Fehler gemeldet.

Ü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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.