Heim > Artikel > Web-Frontend > JQuery implementiert die Ajax-Methode zum Laden von images_jquery

JQuery implementiert die Ajax-Methode zum Laden von images_jquery

WBOYOriginal: 2016-05-16 15:23:441519Durchsuche

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:

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

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

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Von jquery.cookie implementiertes Beispiel für einen Client-WarenkorbvorgangNächster Artikel：Von jquery.cookie implementiertes Beispiel für einen Client-Warenkorbvorgang

In Verbindung stehende Artikel

Mehr sehen