建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

图片延迟加载并等比缩放的JQuery插件

时间:2011-04-23 12:35来源: 作者: 点击:
给大家一个图片延迟加载并等比缩放的JQuery插件,我们先看一下效果:   使用方法: $(".viewArea img").zoom({height:74,width:103}); 代码: Code (function($){     $.fn.zoom = function(settings){      &

给大家一个图片延迟加载并等比缩放的JQuery插件,我们先看一下效果:

 

使用方法:

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

代码:

Code
(function($){

    $.fn.zoom = function(settings){
                //一些默认配置;
                settings = $.extend({
                    height:0,
                    width:0,
                    loading:"这里是图片的地址"
                    },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);

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片