Show spinner over image while it's loading

example.html

<load-image>
	<img #loadImage src="http://orig12.deviantart.net/210f/f/2014/146/9/e/snowy_winter_background_by_archangelical_stock-d7jtb1d.jpg"/>
</load-image>

loadImage.js

let imagesLoaded = require('imagesloaded'); // Weirdly, I couldn't import it using the ES6 command, so I had to use requireJS
import {Component, ElementRef, ContentChild} from '@angular/core';

@Component({
  selector: 'load-image',
  template: `
    <ion-spinner class="load-image--spinner"></ion-spinner>
    <ng-content></ng-content>
  `
})
export class LoadImage {
  @ContentChild('loadImage') img;

  ngAfterContentInit() {
    let imgLoad = imagesLoaded(this.img.nativeElement, (instance) => {
      this.elementRef.nativeElement.classList.add('loaded');
    });
  }

  constructor(private elementRef: ElementRef) {}
}

loadImage.scss

load-image {
  display: block;
  margin:10px auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;

  img {
    display: block;
    margin:0 auto;
    max-width: 100%;
    max-height: 500px;
    box-shadow: 0 0 4px rgba(0,0,0,.6);
    transition: opacity 0.5s ease-out;
    opacity:0;
  }

  ion-spinner {
    transition: opacity 0.5s ease-out;

  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  margin: auto;
  }

  &.loaded {
    img {
      opacity: 1;
    }

    ion-spinner {
      opacity: 0;
    }
  }
}