在页面加载时显示div，在完成时隐藏

I want to show a div with a loading animation over my page while the page loads some XML content. Once its loaded, I want to hide this div. How can I go about doing this?

我想在页面加载一些XML内容时在页面上显示带有加载动画的div。一旦加载，我想隐藏这个div。我该怎么做呢？

5 个解决方案

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

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

#3

@cballou Your code will leave '#div' "up", if $.ajax() has not suceeded for any of numerous possible reasons.

@cballou如果$ .ajax（）由于多种可能的原因而没有被取代，那么你的代码将“#div”“up”。

#4

Almost right ;) Never under-estimate the importance of removing redundant $() calls. So ...

几乎正确;）永远不要低估删除冗余$（）调用的重要性。所以......

//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

--DBJ

#5

I would use the onbeforeunload event fired when the page URL changes, to create an overlay div with opacity at 0.5, which will be replaced by the new content when the page is loaded.

我将使用页面URL更改时触发的onbeforeunload事件，以创建不透明度为0.5的叠加div，在加载页面时将替换为新内容。