Maison > interface Web > js tutoriel > JQuery appelle Ajax pour charger des images

JQuery appelle Ajax pour charger des images

php中世界最好的语言
Libérer: 2018-04-24 15:56:30
original
3432 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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal