Comment afficher ajax en chargeant l'animation gif pendant le chargement de la page?

Question

J'essaie d'implémenter AJAX sur mon site web. Lorsque le contenu du div changepasspass est cliqué, il doit charger changepass.template.php. Voici le code que j'utilise pour ça.

$(function() { 
    $(".changepass").click(function() { 
    $(".block1").load("views/changepass.template.php"); 
    return false; 
}); 

Ma question est de savoir comment afficher l'animation GIF (loading.gif) pendant que la page changepass.template.php est complètement chargée. Donnez-moi quelques conseils de code S'il vous plaît.

Answer 1

Il existe de nombreuses approches pour ce faire. Une façon simple de faire:

<div style="display:none" id="dvloader"><img src="loading.gif" /></div> 

JS:

$(function() { 
    $(".changepass").click(function() { 
     $("#dvloader").show(); 
     $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); }); 
     return false; 
    }); 
}); 

Edité display: block à show() après la suggestion de James Wiseman :)

Answer 2

plutôt que Réglage du style

.css("display", "block"); 

Il suffit d'utiliser le .hide() et. show() méthodes.

Elles prennent en compte les définitions de feuille de style par défaut du navigateur pour les éléments HTMl. Vous ne souhaitez peut-être pas afficher "bloquer" pour l'image. Il peut y avoir des charges de différents styles d'affichage possibles pour un élément:

http://www.w3schools.com/htmldom/prop_style_display.asp

Answer 3

vous pouvez appeler une méthode pour afficher le chargement gif après avoir appelé la charge et se cacher à l'aide de rappel en fonction de la charge:

$(function() { 
    $(".changepass").click(function() { 
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){ 
      $("#gifImage").hide(); 
    }); 
    return false; 
}); 

Answer 4

pour le rendre un peu plus robuste, par exemple, vous oubliez d'ajouter l'

<div style="display:none" id="dvloader"><img src="loading.gif" /></div> 

le html, vous pouvez aussi le faire en jQuery, quelque chose comme:

var container = $.create('div', {'id':'dvloader'}); 
var image = $.create('img', {'src':'loading.gif'}); 
container.append($(image)); 
$("body").append($(container)); 

Qui va ajouter le div automatiquement.

Lancez-le simplement sur l'événement du bouton onclick.

Le rend un peu moins ouvert aux erreurs.