Wie zeigt man eine AJAX-Lade-GIF-Animation, während die Seite geladen wird?

Question

Ich versuche AJAX in meiner Website zu implementieren. Wenn der Inhalt des div changepass angeklickt wird, sollte changepass.template.php geladen werden. Hier ist der Code, den ich dafür verwende.

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

Meine Frage ist, wie GIF-Animation zeigen (loading.gif), während die Seite changepass.template.php vollständig geladen ist. Gib mir einige Code-Tipps Bitte.

Answer 1

Es gibt viele Ansätze, dies zu tun. Eine einfache Art und Weise zu tun:

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

Herausgegeben display: block-show() nach Vorschlag von James Wiseman :)

Answer 2

eher, dass Einstellen des Stils

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

Verwenden Sie einfach die .hide() und. show() Methoden.

Diese Konten berücksichtigen die Standard-Stylesheet-Definitionen für HTMl-Elemente. Sie möchten möglicherweise nicht "Block" für das Bild anzeigen. Es kann für ein Element Lasten von verschiedenen möglichen Darstellungsarten sein:

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

Answer 3

Sie eine Methode aufrufen Laden gif zu zeigen, nachdem Last Aufruf und verstecken sie in Ladefunktion mit Rückruf:

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

Answer 4

um es etwas robuster, zum Beispiel, vergessen Sie die

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

zu den hTML-Code hinzufügen möchten, können Sie dies auch in jQuery, etwas wie:

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

Welche wird das div automatisch hinzufügen.

Feuern Sie dies einfach auf das onclick button event.

Macht es ein wenig weniger anfällig für Fehler.