如何添加一個JavaScript加載器，當DOM「等待」時總會顯示？

我想創建當DOM加載下面的圖片中描繪的像一個微調：如何添加一個JavaScript加載器，當DOM「等待」時總會顯示？

enter image description here

2013-01-03 Ben

獲得從http://www.ajaxload.info/

加載圖像添加一個div將顯示與顯示的進展：在默認情況下沒有CSS

<div id="progress" style="display:none;"> 
      <img src="../images/ajax-progress.gif" alt="Loading please wait..." style="display:block; margin-left: auto; margin-right: auto"/> 
      <span>Please wait while loading records...</span> 
    </div>

在你的JavaScript函數做這樣的事情

function GetData() 
{ 
    //show loading div 
    $('#progress').show(); 
    $.ajax({ 
     url: 'ajax/test.html', 
     success: function(data) { 

     //Hide the progress div if loading data is done 
     $('#progress').hide(); 
     } 
    }); 
}

來源

2013-01-03 01:11:06

我做的是什麼，頁面做的第一件事是顯示微調，然後將其刪除與一個window.onload事件。

來源

2013-01-03 01:00:03

同意。默認情況下顯示加載的gif。然後，一旦您所指的移動已停止，您將隱藏gif並顯示您的內容。 – frosty

好吧，這有幾個選票 - 聽起來像是正確的做法。有人可以寫一些代碼來演示如何做到這一點？我是一個新手，並不太瞭解。謝謝。 – Ben

您可以添加一個覆蓋窗口的動畫gif，並在文檔準備就緒時將其刪除。這將打破沒有啓用javascript的客戶端。

來源

2013-01-03 01:01:11 Kyle

你能否展示一些代碼來演示如何完成？ – Ben

如何添加一個JavaScript加載器，當DOM「等待」時總會顯示？

回答

相關問題