Come mostrare ajax il caricamento dell'animazione gif mentre la pagina si sta caricando?

Question

Provo ad implementare AJAX nel mio sito web. Quando viene cliccato il contenuto del div changepass allora dovrebbe caricare changepass.template.php. Ecco il codice che sto usando per questo.

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

La mia domanda è come mostrare GIF Animation (loading.gif) mentre la pagina changepass.template.php è completamente caricata. Datemi alcuni suggerimenti per il codice, per favore.

Answer 1

Ci sono molti approcci per farlo. Un modo semplice per fare:

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

A cura display: block a show() dopo il suggerimento di James Wiseman :)

Answer 2

Piuttosto che impostazione dello stile

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

Basta usare il .hide() e. Metodi show().

Questi account per le definizioni del foglio di stile predefinite del brower per gli elementi HTMl. Potresti non voler visualizzare 'blocco' per l'immagine. Non ci può essere un sacco di diversi stili di visualizzazione possibili per un elemento:

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

Answer 3

è possibile chiamare un metodo per mostrare carico gif dopo aver chiamato il carico e nasconderlo usando richiamata in funzione del carico:

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

Answer 4

per rendere un po 'più robusto, per esempio, si dimentica di aggiungere il

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

al codice HTML, si può anche farlo in jQuery, qualcosa come:

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

Quale aggiungerà automaticamente il div.

Attiva semplicemente questo evento sul pulsante on-click.

Rende un po 'meno aperto agli errori.