jQuery onLoad event fires before anything loads

Question

I am aware there are similar questions but the answers are not working for me (example below). First, my (simplified) code.

HTML:

<div id="loading_screen">
    <img src="<?= base_url()?>images/loading_screen.png" title="The game is loading, please wait.."/>
</div>
<div id="container">
    <!-- a whole lot of HTML content here -->
</div>

CSS:

#container{
    display:none;
}

JS:

$(document).ready(function(){
    //when document loads, hide loading screen and show game
    $('#loading_screen').hide();
    $('#container').show();
})

The idea is simple: I initially show the loading screen and hide the container; once everything has loaded, I hide the loading screen and show the container.

But, it doesn't work. The JS code fires off show immediately, as soon as the container div starts loading.

The loading_screen div is only 1 small image (20KB) and the container div is a total of about 400KB.

There are images in the container div, as well as background images on some of its sub-elements. So according to the answers to this question I changed the code to $(window).load(function(). However, that didn't fix the issue.

I suppose I could do the following - not even create the container div at first, and only create it and all its content after the loading div has loaded. But, I'd rather not go down that path, there's server side code in the container, I'd have to add includes etc, and it's not worth it. I'm happy to rely on the fact that the 20KB image will load before the 400KB of content, I just need to get the code to not fire off until after those 400 KB have loaded.

EDIT:

I added this bit of code to the JS (outside the onload function) to see what's happening as the page loads:

setInterval(function(){
    var st1 = $('#loading_screen').css("display");
    var st2 = $('#container').css("display");
    console.log(st1+" "+st2);
},100);

It keeps outputting none block, meaning that the loading_screen is hidden immediately and the container is made visible immediately.

Answer 1

You should take a look at the answer for this question: Detect if page has finished loading

The jquery page for the .load() api explains the following:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache

It finishes with this example: Example: Run a function when the page is fully loaded including graphics. http://api.jquery.com/load-event/

$(windows).on("load", function() { /// this is deprecated --> $( window ).load(function() {
   // Run a function when the page is fully loaded including graphics.
}); 

Answer 2

The "ready" event fires when the DOM is built, but before other stuff like images may be loaded. If you want a real "load" handler, then do that:

$(window).load(function(){
    //when document loads, hide loading screen and show game
    $('#loading_screen').hide();
    $('#container').show();
})