動畫加載條

Question

我有一個非常簡單的代碼在這裏：http://jsfiddle.net/Pvp6Z/
我試圖只是增加一個簡單的loading bar當瀏覽器加載代碼，類似的東西，例如可顯示：http://ui-cloud.com/res/designmoo/Loading_bar/previews/main.png 或者更簡單一些。
我搜索了一下，試圖搜索一個代碼，可以幫助我做到這一點，但沒有發現任何東西，我認爲這將通過使用jquery或java完成，只是想知道我該怎麼做。
注意：我不會使用這個欄來發布小提琴中的代碼，我會運行它以獲取需要一秒鐘加載的較重代碼。

Answer 1

Fiddle

var loading = function(){ 
    docHeight = $(document).height(); 

    $('body').append('<div class="overlay" style="background:#fff;width:100%;height:' + docHeight + 'px;position:fixed;top:0px;left:0px;"></div>'); 

    $("#dialog-modal").dialog({ 
     height: 150, 
     modal: true 
    }); 
}; 

loading(); 

我使用了一些非常基本的jQuery用戶界面來完成裝載。然後，因爲我實際上沒有加載任何內容到頁面中，所以我使用setTimeout來模擬等待。一旦等待完成，它將使用「.html」方法用任何要顯示的消息覆蓋加載GIF。

setTimeout(function(){ 
    $("#dialog-modal").html('<p>Loading Complete</p>'); 
    $('.overlay').remove(); 
}, 3000); 

只需在腳本末尾運行這兩部分以關閉加載覆蓋。

$("#dialog-modal").html('<p>Loading Complete</p>'); 
$('.overlay').remove(); 

希望這有助於！如果您有任何問題，請告訴我。