如何在網頁上顯示進度條，直到網頁完全加載？

Question

我想在網頁上顯示進度條/加載彈出窗口，直到頁面完全加載。

我的網頁很重，因爲它包含一個HTML編輯器，它是一個基於jQuery的HTML編輯器，需要花費很多時間才能完成加載。在加載時，我希望在我的頁面上顯示一個進度條，在我的整個頁面加載完成後，該進度條會被刪除。

Answer 1

不知道如何顯示進度條。
但是顯示加載彈出很容易使用jQuery BlockUI Plugin
只需引用頭標記內的jQuery和BlockUi插件。

然後做這樣的事情。

$(document).ready(function() { 
    // block page 
    $.blockUI(); 
    //load your editor here 
    //after load complete unblock page 
    $.unblockUI(); 
}); 

更妙的是，如果你正在使用類似的CKEditor，你可以在CKEditor的負荷完成回調後解鎖頁面。

這是一個小例子，頁面被阻塞10秒。你可以在你的回調中設置相同的值。當資源加載更新進度條

var loadedResources = 0; 
var deferreds = []; 
var resList = [ 'res1.js', 'res2.js' ]; 

$.each(resList, function(index, res) { 
    var load = $.ajax({ 
     type: "GET", 
     url: res, 
     dataType: "script" 
    }).then(function() { 
     loadedResources += 1; 

     //Update progress bar here 
     //Use variable 'loadedResources' and 'resList.length' 
     //to calculate the width of the progess bar 
    }); 
    deferreds.push(load); 
}); 

$.when.apply(this, deferreds).then(function() { 
    //Hide or remove progress bar here because all resources were loaded 
}); 

每次：（Example Here）

Answer 2

如果資源列表（JavaScript文件）是可用的，你可以做這樣的事情。當所有資源都被加載後，您可以隱藏進度條。

$.when.apply()用於將deferreds數組放入一箇中心延遲。如果這個中央延期完成，所有的延期「進入」它也完成了。

當然，您也可以將圖像等添加到資源列表，但必須修改the way of loading以獲取特定資源。

如果需要here您可以找到關於延遲對象的更多信息。

編輯：顯然，如果資源數組中只有一個資源，就看不到真正的進程。