title: Recall window load event - javascript
body: <p>I am going to do my best here to distinctly explain what my issue is without the use of jsfiddle because <code>$(window).on("load")</code> does not fire within their IDE.</p>
  
  <p>I have a html 'wrapper' which dynamically loads (ajax) html into <code>div.content</code>. </p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="header"&gt;&lt;/div&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
  
  
  &lt;div class="loader hidden" align="center"&gt;
      &lt;img src="images/loading.gif" /&gt;
  &lt;/div&gt;
  
  &lt;!-- Container for the content --&gt;
  &lt;div class="content"&gt;
      &lt;!-- dynamic content appears here --&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>At the start of a new piece of content being loaded, I toggle the visibility between the loading gif and the content div.</p>
  
  <pre><code>$(".content").toggleClass("hidden", true);
  $(".loader").toggleClass("hidden", false);
  </code></pre>
  
  <p>At the end of the loading /ajax process I have the following code:</p>
  
  <pre><code>$(".content").load("screens/"+this.currentScreen+"/"+this.currentScreen + ".html .screen", function( response, status, xhr ) 
  {
      //other code 
      //
      //
      $(window).on("load", function() {
          $(".content").toggleClass("hidden", false);
          $(".loader").toggleClass("hidden", true);
       });
   });
  </code></pre>
  
  <p>I chose <code>$(window).on("load")</code> because I only want <code>div.content</code> to be visible again once all the images have finished loading, as opposed to <code>$(document).ready()</code>.</p>
  
  <p>For the <strong>first</strong> piece of content to be loaded, <strong>this works perfectly</strong>. However for the second piece of content, the <code>$(window).on("load")</code> event never fires.</p>
  
  <p>I have a hunch that this event is not allowed to be invoked a second time, or maybe it is unbound after being called?</p>
  
  <p>I tried triggering / invoking the method but to no avail.</p>
  
  <pre><code>if((window.onload) === null)
  {
      $(window).on("load", function() {
          console.log("$(window).on('load') called");
          $(".content").toggleClass("hidden", false);
          $(".loader").toggleClass("hidden", true);
      });
  }
  else
  {
      $(window).trigger("load");
  }
  </code></pre>
  
  <p>Also, I assure everyone that it isn't the content being loaded, because if I replace <code>$(window).on("load")</code> with <code>$(document).ready()</code> it works fine. I just desperately want to wait for the new images to have loaded.</p>
  
  <p>How can I achieve this?</p>