圖片消極式載入並等比縮放，一個簡單的JQuery外掛程式

標籤：c   class   a   http   ext   width   

使用方法：

$(".viewArea img").zoom({height:74,width:103});

 

(function($){

    $.fn.zoom = function(settings){
                //一些預設配置；
                settings = $.extend({
                    height:0,
                    width:0,
                    loading:"http://www.dadachina.com/images/lightbox-ico-loading.gif"
                    },settings);
                    
                var images = this;
                $(images).hide();
                var loadding = new Image();
                loadding.className="loadding"
                loadding.src = settings.loading;
                $(images).after(loadding);    
                
                //預先載入
                var preLoad = function($this){
                    var img = new Image();
                    img.src = $this.src;
                    if (img.complete) { 
                        processImg.call($this);
                        return;
                    }
                    //$this.src = loadding.src;//會導致擷取錯誤的尺寸
                    img.onload = function(){
                        //$this.src = this.src; //會導致擷取錯誤的尺寸
                        
                        processImg.call($this);
                        img.onload=function(){};
                    } 
                }
                
                //計算圖片尺寸；
                function processImg(){
                        //if(settings.height===0||settings.width ===0) return;
                        var m = this.height-settings.height;
                        var n = this.width - settings.width;
                        if(m>n)                        
                            this.height = this.height>settings.height ? settings.height : 

this.height;
                        else
                            this.width = this.width >settings.width ? settings.width : 

this.width;

                        $(this).next(".loadding").remove()
                        $(this).show();
                }
                
                return $(images).each(function(){
                    preLoad(this);
                });                
        }

})(jQuery);