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);

  • 相关阅读:
    React Native组件之Text
    React Native的组件ListView
    React Native中的网络请求fetch和简单封装
    解决FileUpload上传大文件报错
    以EF形式操作mysql数据库
    以ADO形式操作mysql数据库
    Docker
    Docker创建镜像文件并在容器中运行
    WIN10下的Docker安装
    MySQL安装
  • 原文地址:https://www.cnblogs.com/axl234/p/3759290.html
Copyright © 2011-2022 走看看