Skip to content

Instantly share code, notes, and snippets.

@fdidron
Last active August 29, 2015 14:04
Show Gist options
  • Save fdidron/9b7d6b9b5853c8824950 to your computer and use it in GitHub Desktop.
Save fdidron/9b7d6b9b5853c8824950 to your computer and use it in GitHub Desktop.
Removing JQuery's dependency from the preloading image with promises code described here : http://www.bennadel.com/blog/2597-preloading-images-in-angularjs-with-promises.htm
loadImageLocation: function loadImageLocation(imageLocation) {
var preloader = this;
var _onLoadHandler = function(event) {
// Since the load event is asynchronous, we have to
// tell AngularJS that something changed.
$rootScope.$apply(
function() {
preloader.handleImageLoad(event.target.src);
// Clean up object reference to help with the
// garbage collection in the closure.
preloader = image = event = null;
}
);
this.onload = null;
this.onerror = null;
};
var _onErrorHandler = function(event) {
// Since the load event is asynchronous, we have to
// tell AngularJS that something changed.
$rootScope.$apply(
function() {
preloader.handleImageError(event.target.src);
// Clean up object reference to help with the
// garbage collection in the closure.
preloader = image = event = null;
}
);
this.onload = null;
this.onerror = null;
};
// When it comes to creating the image object, it is critical that
// we bind the event handlers BEFORE we actually set the image
// source. Failure to do so will prevent the events from proper
// triggering in some browsers.
var image = new Image();
//Attach the loading event to the _onLoadHandler function
image.onload = _onLoadHandler;
//Attach the error event to the _onErrorHandler function
image.onerror = _onErrorHandler;
image.src = imageLocation;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment