title: Wait for 'background-image' css style to fully load
body: <p>My app is being developed in Angular 5.
  I want to load the background image first </p>
  
  <pre><code>&lt;div id="mainDiv" class="sign-in" [ngStyle]="{'background-image': 'url(' + background_source + ')'}"&gt;
  </code></pre>
  
  <p>and only then load the rest of the page.</p>
  
  <p>Already tried:  </p>
  
  <ul>
  <li>window.onload</li>
  <li>window.document.onload</li>
  <li>document.getElementById("mainDiv").addEventListener("load", function...)</li>
  </ul>
  
  <p>All this methods are triggered before the image fully renders on the page.</p>
  
  <p>I simulate a slow network using Chrome's developer option "Slow 3G Network"</p>
  
  <p>While the image is rendering all this events have already been triggered. Can't find a simple way to make it work.
  Any suggestion would be appreciated. Many thanks in advance</p>