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

Question

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.

Answer 1

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.

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.

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

Answer 2

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

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.

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

If needed here you 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.