JQuery ruft Ajax auf, um Bilder zu laden

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:

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

Button-Ereignisbindung:

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

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

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('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});

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)

ist, was als

$(Element).click(callback)

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:

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

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!