title: Angular 2 - Preload background image?
body: <p>I have this angular project where I have a big background image that fills the page and a simple sidebar with links that when clicked, will change the url of the background with another image (from a cdn). Since these images are fairly big they take a second or two to load and it's noticeable, I want to add a preloader but I'm not sure how that would be done in angular 2.</p>
  
  <p>In my html I have this:</p>
  
  <pre><code>&lt;section class="fullsizebg image-bg" [ngStyle]="{'background-image': 'url(' + urlImage + ')'}"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>The variable urlImage is populated in the constructor of the component and the sidebar links changes the value of it on click with a simple function like so:</p>
  
  <pre><code>generateImage(data: any){
      this.urlImage = 'http://example.com/mycdn/'+this.data.url+'.jpg';
  }
  </code></pre>
  
  <p>So the url is in fact changed instantly but the image takes a bit to load. I'd like to add a loading gif or something like that to keep the image change smooth to the user and not jumpy like it is now.</p>