JQuery implémente la méthode Ajax de chargement d'images

JQuery implémente la méthode Ajax de chargement d'images_jquery

WBOY

Libérer： 2016-05-16 15:23:44

original

1514 Les gens l'ont consulté

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>

Copier après la connexion

Liaison d'événement de bouton :

Copier le code Le code est le suivant :

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

Un tableau PicArr est défini 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;
});

Copier après la connexion

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

Copier après la connexion

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

Copier le code Le code est le suivant :

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

peut être abrégé En

Copier le code Le code est le suivant :

$(Element).click(callback)

pensez à $(Element) Est-ce que .bind("load",callback) et $(Element).load(url,callback) seront les mêmes ? Je n'ai pas trouvé clairement les informations, je l'ai modifiée et je l'ai essayée, mais c'est toujours différent. Mais dans Chrome et ff Cela peut toujours fonctionner sous IE, 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 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>

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui programment jQuery.