Отображение div во время загрузки страницы, скрытие при ее завершении

Question

Я хочу показать div с анимацией загрузки по моей странице, пока страница загружает некоторый XML-контент. После его загрузки я хочу скрыть этот 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' "вверх", если $ .ajax() не suceeded для любого из многочисленных возможных причин.

Answer 4

Я использовал бы событие onbeforeunload, когда изменяется URL-адрес страницы, чтобы создать оверлейный 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