Maison > Article > interface Web > JQuery implémente la méthode Ajax de chargement d'images_jquery
L'exemple de cet article décrit comment JQuery implémente le chargement des images Ajax. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
J'apprends JQuery depuis peu et je souhaite simuler le principe de navigation dans l'album photo sans rafraîchir.
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 lorsque l'obtention est terminée, de rappeler et de modifier le src de la balise img. vient d'être obtenu et il y a un cache, l'image sera affichée immédiatement.
Éléments de la page :
<input class="picbtn" type="button" value="Next" /> <div class="tip">正在加载……</div> <div class="notice"> <img /> </div>
Liaison d'événement de bouton :
Contenu NextPic :
$(".tip").slideDown(200); //显示提示 $.get(PicArr[CurrPic],function(){ $("img").attr("src",PicArr[CurrPic]); $(".tip").slideUp(200); CurrPic++; if(CurrPic>4) CurrPic=0; });
L'affichage est normal sous CHROME et FF, mais anormal 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 de base :
$("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 je regardais attentivement, c'était toujours anormal. L'ordre des images a commencé à sauter de manière aléatoire après un long suivi, j'ai découvert que la fonction de rappel s'exécutait plusieurs fois.
Je pensais que cela pourrait être un problème avec la liaison d'événement, car la liaison de l'événement onclick est
Vérifiez à nouveau le code donné par Jishancao et découvrez où se situe le problème.
L'événement de chargement 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 :
<!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>
J'espère que cet article sera utile à tous ceux qui programment jQuery.