在頁面加載時顯示div，完成後隱藏

Question

我想在頁面加載一些XML內容時在頁面上顯示加載動畫的div。一旦它加載，我想隱藏這個div。我怎麼能這樣做呢？

Answer 1

$.ajax({ 
    url: '/test.xml', 
    beforeSend: function(XMLHttpRequest) { 
     // Show the div before sending the request 
     $('#load').show(); 
    }, 
    complete: function(XMLHttpRequest, textStatus) { 
     // Hide the div no matter if the call succeeded or not 
     $('#load').hide(); 
    }, 
    success: function(xml) { 
     // if the request succeeds do something with the received XML   
    } 
}); 

Answer 2

$.ajax({ 
    type: "GET", 
    url: "your.xml", 
    dataType: "xml", 
    beforeSend: function() { 
     $('#div').fadeIn(); 
    }, 
    success: function(xml) { 
     // example for parsing xml 
     $(xml).find('YOUR_XML_TAG').each(function(){ 
      // append xml to page HERE 
     }); 
    }, 
    complete: function() { 
     $('#div').fadeOut(); 
    } 
}); 

Answer 3

@cballou您的代碼將離開 '#div' 「起來」，如果$。阿賈克斯（）尚未suceeded任何的許多可能的原因。

Answer 4

我會在頁面URL更改時使用onbeforeunload事件來創建一個覆蓋div，其中不透明度爲0.5，當頁面加載時將被新內容替換。

Answer 5

幾乎正確;） 絕不低估刪除冗餘$（）調用的重要性。所以......

//all of this is inside some closure or function 
var $blanket = $("#div") ; 
// check if after last call, something has possibly removed your '#div' 
// throw if false 
ASSERT($blanket.length === 1) ;  
$.ajax({ 
     type: "GET", 
     url: "your.xml", 
     dataType: "xml", 
     beforeSend: function() { $blanket.fadeIn(); 
     }, 
     success: function(xml) { 
      // example for parsing xml 
      $(xml).find('YOUR_XML_TAG').each(function(){ 
       // append xml to page HERE 
      }); 
     }, 
     complete: function() { $blanket.fadeOut(); 
     } 
    }); 

--DBJ