2013-12-10 81 views
-1

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

+0

有什麼問題嗎? – user3079620

回答

0

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

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

+0

哇這是一個偉大的代碼,但有一些錯過了這裏,首先我希望它阻止用戶顯示頁面,直到整個代碼加載,其次我希望它停止加載,並給出消息「加載完成」**後代碼是真的加載和完成加載**,而不是由setTimeout,這是可能的嗎? – user3079620

+0

將在後臺運行的代碼是什麼?它是頁面加載類型的東西,還是Ajax請求?任何更多的信息將是非常有益的。 – wrxsti

+0

它哪個類型的代碼並不重要,只需要預覽** **一個加載欄,直到加載html,css代碼 – user3079620