zoukankan      html  css  js  c++  java
  • 图片延迟加载并等比缩放,一个简单的JQuery插件

    使用方法:

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

    (function($){

        $.fn.zoom 
    = function(settings){
                    
    //一些默认配置;
                    settings = $.extend({
                        height:
    0,
                        
    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);

  • 相关阅读:
    虚拟机(VM) windows server2003 里终于有声音了 Kenny
    web 打印 webrower 控件的ExecWB 及 兼容IE6 IE7 IE8 打印 办法 Kenny
    周三了,工作状态还没调回来 Kenny
    [转]javascript 异步调用 后台.cs里的方法 PageMethods如何使用 Kenny
    FLASHSPI
    函数指针的使用:使程序跳转到Flash指定位置
    关于内存对齐
    SD卡实验:神舟IV
    LCD 横屏竖屏
    全局变量、局部变量、静态全局变量、静态局部变量的区别
  • 原文地址:https://www.cnblogs.com/axl234/p/3759290.html
Copyright © 2011-2022 走看看