How to know $(window).load(); status from jquery

Question

I have created a website loading bar using Jquery UI Progress bar, this progress bar shows the status of scripts loading. A sample is

$.getScript('_int/ajax.js',function() {
    $("#progressinfo").html("Loading Complete ...");
    $("#progressbar").progressbar({ value: 100 });
});

This progress bar is in #indexloader which is blocking the website being loaded behind, its CSS is

#indexloader {
    z-index:100;
    position:fixed;
    top:0;
    left:0;
    background:#FFF;
    width:100%;height:100%;
}

After the progress bar reaches 100% I want to hide and remove #indexloader for that I used

$("#indexloader").fadeOut("slow",function() { $("#indexloader").remove(); });

But the problem is, although the scripts have loaded, the pages are not fully loaded, I see images and other things still loading.

So before fading and removing the #indexloader i want to check whether the $(window).load() has completed or not

Is there a way to check this?

Thanks in advance

Answer 1

Is fading out the loader on window.load an option? Seems like the easiest way to do what you want:

$(window).load(function() {
  $("#indexloader").fadeOut("slow",function() { $("#indexloader").remove(); });
});

Alternatively, set a variable on window.load, like this:

var loaded = false;
$(window).load(function() { loaded = true; });

Then change your fadeout code to look for it:

function fadeIndex() {
  $("#indexloader").fadeOut("slow",function() { $("#indexloader").remove(); });
}
if (loaded) fadeIndex(); //aleady loaded
else $(window).load(fadeIndex); //fade when we do load

Answer 2

Add a property to window:

$(window).load(function() {
    window.loaded = true;
});

Then check window.loaded before you hide #indexloader.