mixins/image-load.js

image-load.js

import Ember from 'ember';

var on             = Ember.on;
var set            = Ember.set;
var run            = Ember.run;
var Mixin          = Ember.Mixin;
var computed       = Ember.computed;
var getWithDefault = Ember.getWithDefault;

export default Mixin.create({
  imageLoaded: false,
  imageLoadFailed: false,
  imageLoadSelector: 'img',

  classNameBindings: ['imageLoaded:image-loaded:image-not-loaded', 'imageLoadFailed'],

  defaultErrorText: computed('errorText', function() {
    return getWithDefault(this, 'errorText', 'Image failed to load');
  }),

  _resolveImage: on('didInsertElement', function() {
    var component = this;
    var imageLoadSelector = this.get('imageLoadSelector');
    var image     = component.$(imageLoadSelector);
    var isCached  = image[0].complete;

    if (!isCached) {
      image.on('load', function() {
        component._imageLoaded();
      });

      image.on('error', function(error) {
        component._imageError(error);
      });
    } else {
      this._imageLoaded();
    }
  }),

  _imageLoaded: function() {
    var component = this;

    run(function() {
      set(component, 'imageLoaded', true);
    });
  },

  _imageError: function() {
    var component = this;

    run(function() {
      set(component, 'imageLoadFailed', true);
    });
  },

  willDestroyElement: function() {
    var imageLoadSelector = this.get('imageLoadSelector');
    this.$(imageLoadSelector).off('load');
    this.$(imageLoadSelector).off('error');
  }
});