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

Question

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

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

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秒钟的例子.您可以在回调中设置相同的内容.(这里的例子)

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数组转换为一个中心延迟.如果这个中央延期完成,那么所有延期'也'完成了.

当然,您也可以将图像等添加到资源列表中,但是您必须修改特定资源的加载方式.

如果需要,您可以在此找到有关延迟对象的更多信息.

编辑:如果资源数组中只有一个资源,显然您无法看到真正的进程.