图片延迟加载jquery插件imgLazyLoad(三)

浏览数：81 / 时间：2015年06月09日

此Jquery插件是在图片加载前显示一个加载图片，当图片下载完毕后显示图片出来，可对图片进行是否自动缩放功能，此Jquery插件使用时可让页面先加载，而图片后加载的方式，解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题

///参数设置：
scaling     是否等比例自动缩放
width       图片最大高
height      图片最大宽
loadpic     加载中的图片路径

js插件代码：

/*
**************图片预加载插件******************
///作者：没剑(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=$("<div class=\"load\"></div>");
        
        t.hide();
        t.after(loading);
        $(img).load(function(){
            autoScaling();
            loading.remove();
            t.attr("src",this.src);
            t.show();
            //alert("finally!")
        });
        
    });
}

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网友没剑原创图片预加载jquery插件</title>
<meta name="Keywords" content="" />
<meta name="description" content=‘‘ />
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        window.jQuery || document.write(‘<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>‘)
    </script>
<script type="text/javascript" src="js/jquery.LoadImage.js"></script>
<script type="text/javascript">
$(function(){
    $(".test").LoadImage(0,160,160,"loading.gif");
});
</script>
<style>
.load{text-align:center;width:99%;height:99%;background:url("loading.gif") center no-repeat}
.pic{text-align:center;float:left;width:24%;height:200px;}
.pic-title{clear:both;height:30px;}
.pic img{width:160px;height:160px;}
</style>
</head>

<body>

<div class="pic-list">

<div class=pic>
<img alt="" title="" src="http://i3.3conline.com/images/piclib/201004/27/batch/1/58761/127232496854943v5k3uijj.jpg*" class="test"/>
<div class=pic-title>图片描述</div>
</div>
    <div class=pic>
        <img alt="" title="" src="http://i3.3conline.com/images/piclib/201004/27/batch/1/58761/127232496854943v5k3uijj.jpg*" class="test"/>
        <div class=pic-title>图片描述</div>
    </div>

</div>
</body>
</html>