JQuery ruft Ajax auf, um Bilder zu laden-js-Tutorial-php.cn

JQuery ruft Ajax auf, um Bilder zu laden

php中世界最好的语言

Freigeben： 2018-04-24 15:56:30

Original

3462 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen JQuery zum Aufrufen von Ajax zum Laden von Bildern. Was sind die Vorsichtsmaßnahmen für JQuery zum Aufrufen von Ajax zum Laden von Bildern?

Die erste Idee, die mir in den Sinn kommt, ist die Verwendung des Caches, das heißt, zuerst die Eingabeaufforderungsmeldung anzuzeigen, dann das Bild abzurufen, nach Abschluss des Abrufs zurückzurufen und die Quelle von zu ändern img-Tag , weil es gerade angekommen ist. Es gibt jedoch einen Cache, sodass das Bild sofort angezeigt wird.

Seitenelement:

<input class="picbtn" type="button" value="Next" />
<p class="tip">正在加载……</p>
<p class="notice">
<img />
</p>

Nach dem Login kopieren

Button-Ereignisbindung:

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

Nach dem Login kopieren

definiert ein Array PicArr zum Aufzeichnen aller Bilder

NextPic-Inhalt:

$(".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 in Onload zurückzurufen.

Kerncode:

$("img").attr("src",PicArr[CurrPic]) 
.bind(&#39;load&#39;,function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});

Nach dem Login kopieren

Später sah es im Grunde normal aus, aber wenn man genau hinschaut, war es immer noch ungewöhnlich. Nach längerem Verfolgen begann die Reihenfolge der Bilder zufällig zu springen. Ich habe festgestellt, dass zu viele Callback-Funktionen ausgeführt wurden.

Ich dachte, es könnte ein Ereignisbindungsproblem sein, da die Onclick-Ereignisbindung

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

Nach dem Login kopieren

ist, was als

$(Element).click(callback)

Nach dem Login kopieren

abgekürzt werden kann. Ich dachte an $(Element).bind ( „load“, callback) und $(Element).load(url, callback) sind nicht dasselbe. Ich habe die Informationen überprüft, aber sie sind nicht ganz klar. Ich habe sie geändert und ausprobiert, aber sie sind immer noch anders Funktioniert immer noch unter Chrome und ff. Es funktioniert, 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(&#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>
</head>
<body>
<input class="picbtn" type="button" value="Next" />
<p class="tip">正在加载……</p>
<p class="notice">
<img id="img"/>
</p>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erklärung der Hintergrundschritte der jQuery+AJAX-Implementierung

Grafisches Tutorial mit ausführlicher Erklärung zur Verwendung von AJAX

Das obige ist der detaillierte Inhalt vonJQuery ruft Ajax auf, um Bilder zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!