JQuery appelle Ajax pour charger des images

Cette fois, je vais vous proposer JQuery pour appeler Ajax pour charger des images. Quelles sont les précautions pour que JQuery appelle Ajax pour charger des images. Ce qui suit est un cas pratique, jetons un coup d'œil.

La première idée qui me vient à l'esprit est d'utiliser le cache, c'est-à-dire d'afficher d'abord le message d'invite, puis d'obtenir l'image, de rappeler une fois l'obtention terminée et de modifier le src du balise img , car elle vient de recevoir Cependant, il y a un cache, donc l'image sera affichée immédiatement.

Éléments de page :

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

Liaison d'événement de bouton :

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

définit un tableau PicArr pour enregistrer toutes les images

Contenu NextPic :

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

s'affiche normalement sous CHROME et FF, mais anormalement sous IE6 et 8 n'ont pas été testés.

Plus tard, avec l'aide du développeur ASPRAIN Ji Shancao, l'idée a été modifiée pour changer d'abord src, puis lier l'événement onload et rappeler onload.

Code principal :

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

Plus tard, j'ai vu que c'était fondamentalement normal, mais si j'ai regardé attentivement, c'était toujours anormal. L'ordre des images a commencé à sauter de manière aléatoire après un suivi. Pendant longtemps, j'ai découvert que la Fonction de rappel s'exécuterait plusieurs fois.

Je pensais que cela pourrait être un problème de liaison d'événement, car la liaison d'événement onclick est

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

qui peut être abrégée en

$(Element).click(callback)

J'ai pensé à $( Element .bind("load",callback) et $(Element).load(url,callback) ne sont pas les mêmes. Les informations ne sont pas très claires. Je l'ai modifiée et essayée, mais c'est toujours différent. chrome et cela peut toujours fonctionner sous ff, mais les données ne sont pas normales et une erreur est signalée sous IE.

Vérifiez à nouveau le code donné par Jishancao et découvrez où se situe le problème. L'événement

load est lié à une fonction anonyme, et il sera à nouveau lié lorsque le bouton sera enfoncé, il sera donc exécuté à plusieurs reprises. J'ai donc changé la liaison en une seule et c'était fait. Le code final complet est le suivant :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée des étapes de base de l'implémentation de jQuery+AJAX

Explication détaillée de l'utilisation de AJAX en tutoriel graphique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!