Show jQuery loading progress before page fully loaded

Question

I am using requireJS domReady plug in to show jQuery loading progress on asp.net web page.

Here is the code that I am using,

require(['domReady'], function (domReady) {
  domReady(function () {
    //Hide jQuery loading progress
  });
    //Show jQuery loading progress
});

Problem: jQuery loading progress is showing good, but it will only start after HTML controls loaded on the page. Behind the scenes some java script are still being loaded.

Once the HTML (for example a button) loaded, the jQuery loading progress stars and dis-appears after all the libraries are loaded. I want to show jQuery loading progress as soon as a page is requested. Any suggestions?

Answer 1

You can use the jQuery onload function:

$(window).load(function() {
    // Animate loading element
    $(".preLoad").fadeOut("afterLoad");
});

And the preLoad class will be on your element/gif that displays as the page is loading, and after it's finished loading, it will display afterLoad

In your CSS, you would have:

.preLoad {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/reloadImage.gif) center no-repeat #fff;
}

.afterLoad {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

In your HTML you would have:

<div class="preLoad">

And the preLoad/afterLoad classes would get applied after and before the page loads, and what's contained in each depends on what you want to see.

Answer 2

You could use a fixed div with a visible loader (e.g. an animated gif) by default and then hide it once the page has loaded.