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

How to show progress bar on web page until web page is fully loaded?

提问by Abhi

I would like to show a progress bar/loading popup in a web page until the page is fully loaded.

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

My web page is heavy because it contains an HTML editor in it, which is a jQuery based HTML editor that takes a lot of time to completely load. While it is loading, I wish to show a progress bar on my page which will get removed just after my whole page has finished loading.

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

采纳答案by naveen

Don't know how to show a progress bar.
But showing a loading popup is easy using jQuery BlockUI Plugin
Just reference the jQuery and the BlockUi Plugin inside the head tag.

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

Do something like this then.

那么做这样的事情。

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

Better still if you are using something like CKEditor, you can unblock the page after the load complete callback of the ckeditor.

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

Here is a small example with a page being blocked for 10 seconds. You can set the same at your callback. ( Example Here)

这是一个页面被阻止 10 秒的小示例。您可以在回调中设置相同的值。（示例在这里）

回答by Arxisos

If a list of resources (javascript files) is available, you can do something like this:

如果有可用的资源列表（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
});

Every time when a resource was loaded you update the progress bar. When all resources were loaded you can hide the progress bar.

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

$.when.apply()is used to get the deferreds array into one central deferred. If this central deferred is finished, all deferreds 'into' it are finished, too.

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

Of course you can also add images etc to the resource list, but then you have to modify the way of loadingfor the specific resource.

当然你也可以在资源列表中添加图片等，但是你必须修改特定资源的加载方式。

If needed hereyou can find more information about Deferred Objects.

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

Edit: Obviously you can't see a real process if only one resource is in the resource array.

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