博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图片延迟加载并等比缩放,一个简单的JQuery插件
阅读量:6918 次
发布时间:2019-06-27

本文共 1166 字,大约阅读时间需要 3 分钟。

使用方法:

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

 

(function($){

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

转载于:https://www.cnblogs.com/axl234/p/3759290.html

你可能感兴趣的文章
linux更换网卡网卡名称变化更改
查看>>
降低Redis内存占用
查看>>
mysql中 如何合并两张表
查看>>
mysql 数据库集群搭建:(四)pacemaker管理三台maxscale集群,搭建mariadb读写分离中间层集群...
查看>>
CentOS 7 单机安装 kafka 0.11.0.1
查看>>
超强的sql语句
查看>>
MongoDB 复制(副本集)
查看>>
磁盘分区
查看>>
正则匹配密码强度
查看>>
Scanner类 与 String类
查看>>
JEPLUS表格组件数据延伸展示——JEPLUS软甲快速开发平台
查看>>
使用jenv管理多个java版本
查看>>
script标签src以//开头
查看>>
Linux的哲学思想
查看>>
闪电修手机上门维修,我的头号选择!
查看>>
Java使用Hutool实现AES、DES加密解密
查看>>
bugzilla入门不提高
查看>>
Redis缓存,并发问题看这篇就可以了
查看>>
浮点数在计算机中存储方式
查看>>
【PHP】常用代码片段篇
查看>>