zoukankan      html  css  js  c++  java
  • jquery图片预加载+自动等比例缩放插件

    /*
    **************图片预加载插件******************
    ///作者:没剑(2008-06-23)
    ///http://regedit.cnblogs.com

    ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来
    可对图片进行是否自动缩放功能
    此插件使用时可让页面先加载,而图片后加载的方式,
    解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题
    ///参数设置:
    scaling     是否等比例自动缩放
    width       图片最大高
    height      图片最大宽
    loadpic     加载中的图片路径
    */
    jQuery.fn.LoadImage
    =function(scaling,width,height,loadpic){
        
    if(loadpic==null)loadpic="load3.gif";
        
    return this.each(function(){
            
    var t=$(this);
            
    var src=$(this).attr("src")
            
    var img=new Image();
            
    //alert("Loading")
            img.src=src;
            
    //自动缩放图片
            var autoScaling=function(){
                
    if(scaling){
                
                    
    if(img.width>0 && img.height>0){ 
                        
    if(img.width/img.height>=width/height){ 
                            
    if(img.width>width){ 
                                t.width(width); 
                                t.height((img.height
    *width)/img.width); 
                            }else
                                t.width(img.width); 
                                t.height(img.height); 
                            } 
                        } 
                        
    else
                            
    if(img.height>height){ 
                                t.height(height); 
                                t.width((img.width
    *height)/img.height); 
                            }else
                                t.width(img.width); 
                                t.height(img.height); 
                            } 
                        } 
                    } 
                }    
            }
            
    //处理ff下会自动读取缓存图片
            if(img.complete){
                
    //alert("getToCache!");
                autoScaling();
                
    return;
            }
            $(
    this).attr("src","");
            
    var loading=$("<img alt=\"加载中\" title=\"图片加载中\" src=\""+loadpic+"\" />");
            
            t.hide();
            t.after(loading);
            $(img).load(
    function(){
                autoScaling();
                loading.remove();
                t.attr(
    "src",this.src);
                t.show();
                
    //alert("finally!")
            });
            
        });
    }

    使用说明:
    $("div img").LoadImage(true,120,90);

    效果如下:



    欢迎大家交流使用心得
  • 相关阅读:
    hive中named_struct构造和使用
    hive非分区表导入csv数据
    hive常用的日期函数
    hive mapreduce reducer 调优
    Hive Analytics Functions row_number rank over partition by
    skip-grant-tables
    VC中的字符串转换宏
    CMAKE的使用
    VSCODE C/C++配置
    libcurl,多线程,gzip,共享DNS
  • 原文地址:https://www.cnblogs.com/top5/p/1660199.html
Copyright © 2011-2022 走看看