如何在网页加载完成前显示进度条？

Question

我想在网页中展示一个进度条/加载弹窗，直到页面完全加载完成。

我的网页很重，因为其中包含一个HTML编辑器，这是一个基于jQuery的HTML编辑器，需要花费很长时间才能完全加载。在它加载时，我希望在我的页面上显示一个进度条，该进度条将在整个页面加载完成后被删除。

- Abhi

Answer 1

不知道如何显示进度条。
但是使用jQuery BlockUI插件很容易显示加载弹出窗口。
只需在head标签中引用jQuery和BlockUi插件即可。

像这样做。

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

更好的是，如果您正在使用像CKEditor这样的工具，您可以在ckeditor的加载完成回调之后解除页面的阻塞。

以下是一个小例子，页面被阻塞了10秒。您可以在回调函数中设置相同的时间。（示例在此处：Example Here）

- naveen

Answer 2

如果有资源（javascript文件）列表可用，您可以这样做：

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

每次加载资源时，您都会更新进度条。当所有资源都加载完成时，可以隐藏进度条。

使用$.when.apply()将延迟数组合并为一个中央延迟对象。如果此中央延迟对象完成，则其中的所有延迟对象也完成了。

当然，您也可以将图像等添加到资源列表中，但是您必须修改加载方式以适用于特定资源。

如果需要在这里，您可以找到有关延迟对象的更多信息。 编辑：显然，如果资源数组中只有一个资源，则无法看到真正的过程。

- Arxisos