title: jQuery onLoad event fires before anything loads
body: <p>I am aware there are similar questions but the answers are not working for me (example below). First, my (simplified) code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="loading_screen"&gt;
      &lt;img src="&lt;?= base_url()?&gt;images/loading_screen.png" title="The game is loading, please wait.."/&gt;
  &lt;/div&gt;
  &lt;div id="container"&gt;
      &lt;!-- a whole lot of HTML content here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container{
      display:none;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
      //when document loads, hide loading screen and show game
      $('#loading_screen').hide();
      $('#container').show();
  })
  </code></pre>
  
  <p>The idea is simple: I initially show the loading screen and hide the <code>container</code>; once everything has loaded, I hide the loading screen and show the container.</p>
  
  <p>But, it doesn't work. The JS code fires off show immediately, as soon as the <code>container</code> div <em>starts</em> loading.</p>
  
  <p>The <code>loading_screen</code> div is only 1 small image (20KB) and the <code>container</code> div is a total of about 400KB.</p>
  
  <p>There are images in the container div, as well as background images on some of its sub-elements. So according to the answers to <a href="https://stackoverflow.com/questions/9134918/document-ready-fires-too-early">this question</a> I changed the code to <code>$(window).load(function()</code>. However, that didn't fix the issue.</p>
  
  <p>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.</p>
  
  <p>EDIT:</p>
  
  <p>I added this bit of code to the JS (outside the onload function) to see what's happening as the page loads:</p>
  
  <pre><code>setInterval(function(){
      var st1 = $('#loading_screen').css("display");
      var st2 = $('#container').css("display");
      console.log(st1+" "+st2);
  },100);
  </code></pre>
  
  <p>It keeps outputting <code>none block</code>, meaning that the loading_screen is hidden immediately and the container is made visible immediately.</p>