JQuery appelle Ajax pour charger des images-js tutoriel-php.cn

JQuery appelle Ajax pour charger des images

php中世界最好的语言

Libérer： 2018-04-24 15:56:30

original

3412 Les gens l'ont consulté

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 :

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

Copier après la connexion

Liaison d'événement de bouton :

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

Copier après la connexion

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

Copier après la connexion

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(&#39;load&#39;,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 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)

Copier après la connexion

qui peut être abrégée en

$(Element).click(callback)

Copier après la connexion

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 :

<!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>

Copier après la connexion

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