Plugin jquery para carga de imagem

Carrega uma imagem menor enaquanto carrega a imagem maior

by edgardleal

HTML

<img data="-9223372036854597252.png" />
<img data="-9223372036854597253.png" />
<img data="-9223372036854597254.png" />
<img data="-9223372036854597255.png" />
<img data="-9223372036854597256.png" />
<img data="-9223372036854597257.png" />
<img data="-9223372036854597258.png" />
<img data="-9223372036854597259.png" />
<img data="-9223372036854597260.png" />
<img data="-9223372036854597261.png" />
<img data="-9223372036854597262.png" />
<img data="-9223372036854597263.png" />
<img data="-9223372036854597282.png" />
<img data="-9223372036854597283.png" />
<img data="-9223372036854597284.png" />
<img data="-9223372036854597285.png" />
<img data="-9223372036854607766.png" />
<img data="-9223372036854607767.png" />
<img data="-9223372036854607768.png" />
<img data="-9223372036854607770.png" />
<img data="-9223372036854607771.png" />
<img data="-9223372036854607772.png" />
<img data="-9223372036854607773.png" />
<img data="-9223372036854607774.png" />
<img data="-9223372036854607776.png" />
<img data="-9223372036854607778.png" />

CSS

img {
    width : 200px;
    height : 200px;
    border : solid 1px;
}

JavaScript

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);


$.widget("custom.imageLoad", {
    options : {
        src : undefined,
        nocache : true, // nao usa o cache
        baseSmall : "http://198.199.90.117/imagens/80/",
        baseLarge : "http://198.199.90.117/imagens/400/"
    } ,
    _load : function(){
       var $self = this;
       $self.image.src = this.options.baseLarge + this.options.src;
    },
    _create : function() {
        if(this.options.nocache)
            this.options.src = this.options.src + "?nocache=" + (Math.round(Math.random() * 999999));
        
            this.options.src = $(this.element).attr("data");
        var $self = $(this.element).attr("src", this.options.baseSmall + this.options.src);
        var self = this;
        $self.image = document.createElement("img");
        $self.image.onload = function(){
            if($self.attr("src")!==self.options.baseLarge + self.options.src )
               $self.attr("src", self.options.baseLarge + self.options.src);
            $self._load();
        };
        
    }
});




   
$("img").imageLoad({ "nocache" : true});