图片延迟加载并等比缩放,一个简单的JQuery插件

使用方法:

$(".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);

图片延迟加载并等比缩放,一个简单的JQuery插件,布布扣,bubuko.com

图片延迟加载并等比缩放,一个简单的JQuery插件

上一篇:001.为什么选择用AngularJs开发?


下一篇:ASP.NET页面与IIS底层交互和工作原理详解(第一回)