页面加载时显示 div，完成后隐藏答案

【问题标题】：Showing a div while page is loading, hiding when its done页面加载时显示 div，完成后隐藏
【发布时间】：2009-11-05 13:38:52
【问题描述】：

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

【问题讨论】：

XML 内容是如何加载的？是通过 AJAX 吗？

标签： javascript jquery html

【解决方案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           
    }
});

【讨论】：

为什么这是这里的“最佳”解决方案？我的几乎相同，并且有“0”。不是我在乎，而是让我想知道这里的“评分系统”？

【解决方案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 如果 $.ajax() 由于多种可能的原因没有成功，您的代码将保留“#div”“up”。

【讨论】：

【解决方案4】：

几乎是对的 ;) 永远不要低估删除多余的 $() 调用的重要性。所以...

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

【讨论】：

【解决方案5】：

我会使用页面 URL 更改时触发的 onbeforeunload 事件来创建一个不透明度为 0.5 的覆盖 div，当页面加载时，它将被新内容替换。

【讨论】：