Cacher is the code snippet organizer for pro developers

$.loadImage = function(url) {
  // define a "worker" function that should eventually resolve or reject the deferred object.
  var loadImage = function(deferred) {
    var image = new Image();

    // set up event handlers to know when the image has loaded
    // or fails to load due to an error or abort.
    image.onload = loaded;
    image.onerror = errored; // URL returns 404, etc
    image.onabort = errored; // IE may call this if user clicks "Stop"

    // setting the src property begins loading the image.
    image.src = url;

    function loaded() {
      unbindEvents();
      // calling resolve means the image loaded sucessfully and is ready to use.
      deferred.resolve(image);
    }
  
    function errored() {
      unbindEvents();
      // calling reject means we failed to load the image (e.g. 404, server offline, etc).
      deferred.reject(image);
    }
  
    function unbindEvents() {
      // ensures the event callbacks only get called once.
      image.onload = null;
      image.onerror = null;
      image.onabort = null;
    }
  };

  // create the deferred object that will contain the loaded image.
  // we don't want callers to have access to the resolve() and reject() methods, 
  // so convert to "read-only" by calling `promise()`.
  return $.Deferred(loadImage).promise();
};