Simple jquery plugin fades image in on load

prettyloader.js

(function($) {
  var PrettyLoader = function(el, opts) {
    var settings = $.extend({}, $.fn.prettyloader.defaults, opts)
     $el = $(el);
    function init() {
      $el.hide().one('load', loaded).each(function() {
        // manually call load() if the image has been cached
        if (this.complete) $el.load();
      });
    }
    function loaded() {
      $el.fadeIn(settings.transition);
    }
    init();
  };
  $.fn.prettyloader = function(options) {
    return this.each(function(idx, el) {
      var $el = $(this), key = 'prettyloader';
      if ($el.data(key)) { return; }
      var prettyloader = new PrettyLoader(this, options);
      $el.data(key, prettyloader);
    });
  };
  $.fn.prettyloader.defaults = {
    transition: 300
  };
})(jQuery);