Recall window load event - javascript
<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>