AJAX加載器動畫未顯示

Question

我有一個AJAX腳本，一旦執行後應該觸發加載圖像，然後隱藏它，一旦我從網絡服務獲得結果，但圖像現在正在顯示。

我的代碼如下：

<script type="text/javascript"> 
     function get_Code_Results() { 
      document.getElementById("loader").innerHTML = "<img src=\'loading.gif\' />"; 
      var url = document.location; 
      if (window.XMLHttpRequest) req = new XMLHttpRequest(); 
      else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP"); 
      req.onreadystatechange = processRequest; 
    //  req.open("GET", url, true); 
    //  req.send(null); 
      req.open("POST",url,true); 
      req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
      req.send("isbns="+document.getElementById("Code").value); 
      function processRequest() { 
     if (req.readyState == 4 && document.getElementById("1").checked == true) { 
      document.getElementById("results").value = "myfirsturl.com" + req.responseText; 
     } 
     else if (req.readyState == 4 && document.getElementById("2").checked == true) { 
      document.getElementById("results").value = "myurl.com" + req.responseText; 
     }   
    } 
} 
    </script> 

，我有一個位置，我要顯示裝載機：

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

我在哪裏有我的代碼錯誤了嗎？一些建議將不勝感激！

Answer 1

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

您需要更改style="display:none;"。我建議你寫下面的代碼來代替：

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

然後在需要時：

$('#loader').show(); // To show the laoding icon 
$('#loader').hide(); // To hide it 

Answer 2

你的函數的嵌套。我猜你假裝寫事端，如：

function get_ISBN_Results() { 
      document.getElementById("loader").innerHTML = "<img src=\'loading.gif\' />"; 
      var url = document.location; 
      if (window.XMLHttpRequest) req = new XMLHttpRequest(); 
      else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP"); 
      req.onreadystatechange = processRequest; 
    //  req.open("GET", url, true); 
    //  req.send(null); 
      req.open("POST",url,true); 
      req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
      req.send("isbns="+document.getElementById("isbns").value); 
} 
function processRequest() { 
     if (req.readyState == 4 && document.getElementById("book").checked == true) { 
      document.getElementById("results").value = "myfirsturl.com" + req.responseText; 
     } 
     else if (req.readyState == 4 && document.getElementById("magazine").checked == true) { 
      document.getElementById("results").value = "myurl.com" + req.responseText; 
     }   
}