Question

我想在网页中显示进度条/加载弹出窗口，直到页面完全加载。

我的网页很重，因为它包含一个HTML编辑器，它是一个基于jQuery的HTML编辑器，需要花费大量时间才能完全加载。在加载时，我希望在我的页面上显示一个进度条，在我的整个页面加载完毕后会立即删除。

Answer 1

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

然后做这样的事情。

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

更好的是，如果您使用的是CKEditor之类的东西，您可以在ckeditor的加载完成回调之后取消阻止页面。

以下是一个阻止页面停留10秒的小例子。您可以在回调中设置相同的内容。（Example Here）

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()用于将deferreds数组转换为一个中心延迟。如果这个中心延期完成，那么所有延期'也'结束'也就完成了。

当然，您也可以将图像等添加到资源列表中，但是您必须修改特定资源的the way of loading。

如果需要here，您可以找到有关延期对象的更多信息。

编辑：如果资源数组中只有一个资源，显然你看不到真正的进程。

如何在网页完全加载之前在网页上显示进度条？

2 个答案: