如何在网页上显示进度条，直到网页完全加载？

问题描述：

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

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

答

不知道如何显示进度条。
但是显示加载弹出很容易使用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）

答

如果资源列表（JavaScript文件）是可用的，你可以做这样的事情。当所有资源都被加载后，您可以隐藏进度条。

$.when.apply()用于将deferreds数组放入一个中心延迟。如果这个中央延期完成，所有的延期“进入”它也完成了。

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

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

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

如何在网页上显示进度条，直到网页完全加载？

相关推荐