How to call JQuery after all assets load AND canvas has fully rendered

Question

I am making a game which has many graphics and assets.

Thus, I created a simple loading page to show the user while it loads. I used the JQuery below to make the loading screen fade out the moment everything loads:

$(document).ready(function(){
    $("#loading").fadeOut("slow")
})

From what I know, this should only fade out the loading screen AFTER the document has loaded completely, together with all the assets, but this is not the case! Observe the demo on the page itself: tdat.tk

As you can see, the loading screen fades out, but then the canvas is still blank and rendering. How can I prevent this from happening?

Answer 1

try load() function

$(document).load(function(){
    $("#loading").fadeOut("slow");
})

load function will run only when all resources of documents will be loaded . while ready function will run when the html of the document will be loaded .

Answer 2

In document.ready, start your loading animation and behind the scenes load your assets. Create an array for your assets and start loading them one by one. For eg

var image = new Image();
image.onload = function() {
  //when image loaded
};

image.src = url;

Once you have all the assets loaded, fadeout your loading screen. You can also refer this example http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/