title: How do I trigger a loading event after the window itself has been loaded?
body: <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>