Question

I have created a website loading progress 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?

Answer 1

Add a property to window:

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

Then check window.loaded before you hide #indexloader.