Animation während des Wartens auf externe AJAX-Anforderung anzeigen

Question

Ein JavaScript für GUI-Manipulation ruft JavaScript zur Datenverarbeitung auf. Ich möchte eine Animation anzeigen, während ich auf die externe Ajax-Anfrage warte. Zum Beispiel: gui.js hat die Methode showData(id) und data.js hat eine Funktion getData(id). Inside showData(id) Ich rufe getData(id). Inside getData ist ein $ajax zum Abrufen von Daten aus der Datenbank. Ich möchte eine Animation anzeigen, während showData(i) auf getData() wartet.

Ich habe viel gefunden, um eine Ajax-Anfrage zu machen, nachdem eine andere Ajax-Anfrage erfolgreich war, aber keine Lösung für mein Problem.

UPDATE: Holen Sie sich Details im Moment. Vielleicht könnte ich das $ .ajax zurückgeben und asynchron machen.

function getData(id) { 
var ajaxResult = $.ajax({ 
    type : 'POST', 
    url : '/ajax/getData.php', 
    data : {'id' : id}, 
    dataType : 'json', 
    async: false, 
    error : function() { 
     console.log("FAILURE on getting" + id); 
    } 
}); 
return ajaxResult.responseText;} 

Die showData sollte getData() aufrufen.

function showDetails(id) { 
$('#ElementInfo').html(""); 
var jsonData = getData(); //while that show load 
//hide load animation 
$('#ElementInfo').html(makeHtml(data));} 

Answer 1

Fügen Sie Ihre Animation in ein HTML-Element.

Unmittelbar vor der Ajax-Anfrage "zeigen" Sie das Element. Auf "Erfolg" von der Ajax-Anfrage "verstecken" Sie es erneut.

dh.

html

<div class="animation">animation here</div> 

js

$("#animation").show() 
$.ajax({ 
    type:"GET", 
    url:"/whatever/url" 
    dataType:"json", 
    success:function(response){ 
     $("#animation").hide(); 
     //then do what you need to do with your response 
    } 
}); 

}

Answer 2

Erstellen 2 Klassen ist div versteckt zu machen.

.hidden{ 
display:none; 
} 

Zweite, um Bild anzuzeigen.

.show_image{ 
position:fixed;top:0;right:0;bottom:0;left:0; 
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%; 
z-index:100; 
background-size: 5ex; 
} 

Und Ihre HTML-Code wäre

<div class="show_image hidden"></div> 
<div class="box"> Your content </div> 

Anfangs Bild im verborgenen Modus wird geladen. Jetzt, bevor Sie Ihre Ajax-Anfrage senden, blenden Sie einfach das Lade-Image ein und nachdem Sie die Server-Antwort erhalten haben, verstecken Sie sie.

$.ajax({ 
      url: "http://wwww.example.com", 
      type: 'POST', 
      data: yout_data, 
      dataType: 'json', 
      //async: true, 
      //cache:true, 
      success: function(data) { 
       result = data; 
      $('.show_image').addClass("hidden"); 
      }, 
      error: function() { 
       console.log("error: load handler failed: " + url); 
       result = "null"; 
      } 
     }); 

Lade Bild wird in der Mitte der Seite und Hintergrund transparent wird worden erscheinen werden. Bitte lassen Sie mich wissen, wenn Sie Schwierigkeiten haben.

Wie pro Ihr Code:

function showDetails(id) { 
$('#ElementInfo').html(""); 
$('.show_image').removeClass("hidden"); // Now the image will be displayed 
var jsonData = getData(); // it will request the data to be return 
// in the ajax request i have stopped animation "in success" 
$('#ElementInfo').html(makeHtml(data));}