Image Loader

components.preload-img.js

import Ember from 'ember';
const { 
  computed,
  String: { htmlSafe },
  run: { scheduleOnce },
  RSVP: { Promise },
} = Ember;

export default Ember.Component.extend({
  classNames: ['preload-img'],

  maxHeight: 0,
  maxWidth: 0,
  
  backgroundImage: computed('isLoaded', 'src', function() {
    if (!this.isLoaded) { return; }
    
    return htmlSafe(`background-image: url('${this.src}')`);
  }),
  
  imgStyle: computed('maxHeight', 'maxWidth', function() {
    if (this.maxHeight > 0 && this.maxHeight > this.maxWidth) {
      return htmlSafe(`max-height: ${this.maxHeight}px; height:100%;`);
    } 
    
    if (this.maxWidth > 0 && this.maxWidth > this.maxHeight) {
    	return htmlSafe(`max-width: ${this.maxWidth}px; width:100%;`);
    }
  }),
  
  _getImage(url) {
    return new Promise((resolve, reject) => {
      if (!url) return reject("Missing URL!");

      if (typeof FastBoot !== 'undefined') return;

      let img = new Image();
      img.src = url;
      
      img.onload = () => {
        resolve([url, img.height, img.width]);
      };
    });
  },
  
  _setDimensions(imgHeight, imgWidth) {
    const { maxHeight, maxWidth } = this.getProperties(['maxHeight', 'maxWidth']);
    
    if (maxWidth) {
      const scale = this._getScale(imgWidth, maxWidth);
      
      imgHeight = (imgHeight * scale);
      imgWidth = maxWidth;
    } else {
      const scale = this._getScale(imgWidth, maxWidth);
      
      imgHeight = maxHeight;
      imgWidth = (maxWidth * scale);
    }
    
    return this.setProperties({
      imgHeight,
      imgWidth,
    });
  },
    
  _getScale(value, maxValue) {
    return maxValue / value;
  },
    
  didInsertElement() {
    this._super(...arguments);
    
    scheduleOnce('afterRender', this, () => {
   		this._getImage(this.src).then((results) => {
        const [url, height, width] = results;
        this._setDimensions(height, width);
				this.set('isLoaded', true);
      });
    });
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<style type="text/css">
  .preload-img {
    display: block;
    position: relative;
  }
  
  div.preload-img .img-placeholder {  
  	height: 100%;
    width: 100%;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    
    transition: width 2s, height 2s, transform 2s, opacity 0.5s linear;
  }
  
  .hide {
    opacity: 0;
  }
  
  .flex {
    display: flex;
  }
  
  .flex--1 {
    flex: 1;
  }
  
  .flex--2 {
  	flex: 2;
  }
</style>

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

<div class="flex">
  {{preload-img classNames="flex--1" src="https://www.gannett-cdn.com/-mm-/c3228682e83953174f4acd5da7e9bc561992b6da/c=5-0-1224-689&r=x1683&c=3200x1680/local/-/media/USATODAY/popcandy/2014/04/03//1396542482000-robot.jpg" maxWidth="250"}}
  <div class="flex--2">
    <!-- start slipsum code -->

    <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>

    <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>

    <!-- end slipsum code -->
  </div>
</div>

templates.components.preload-img.hbs

<div class="img-placeholder {{if isLoaded 'hide'}}"></div>
<img src={{src}} style={{imgStyle}}>

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}