How do I trigger a loading event after the window itself has been loaded?
<p>I have a framework (vue.js) inserting some images on a page change (with a router, not a real page refresh). When loaded directly, I can make the page display a loading screen:</p>

<pre><code>loading = true;
$(window).on( 'load', function(){
    loading = false;
});
</code></pre>

<p>However, the <code>$(window).on('load')</code> doesn't trigger if the page has been navigated via the framework. This (I assume) is because the <code>window</code> is already loaded, and the loading of the new images isn't tied to the window anymore. So, the <code>loading = false</code> never triggers because the window already loaded.</p>

<p>Here's an extremely simplified example, but it illustrates the same point:</p>

<pre><code>//Loading the initial image, it works fine because it runs on window load.
console.log('Loading first image...')
$(window).on('load',function(){
    console.log('First image loaded');
});


$('button').on('click',function(){
  $('div').append('&lt;img src="https://placekitten.com/200/300"&gt;');
  console.log('Loading extra image...');

  //This never triggers because the window is already loaded. 
  //I need something to trigger while the appended images are loading
  $(window).on('load',function(){
    console.log('Extra image loaded.');
  });

});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;img src="https://placekitten.com/200/300"&gt;
&lt;button&gt;Click to load extra&lt;/button&gt;
&lt;div&gt;&lt;/div&gt;
</code></pre>

<p>Here's a <a href="http://codepen.io/Blue_Dragon360/pen/GqjyGJ?editors=1010" rel="nofollow">codepen</a>.</p>