使用方法:

$(".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);

图片延迟加载并等比缩放,一个简单的JQuery插件的更多相关文章

  1. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  2. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  3. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  4. 实现一个简单的Vue插件

    我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...

  5. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  6. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

  7. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

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

    原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jque ...

  9. .Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器

    目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不 ...

随机推荐

  1. C/C++中经常使用的字符串处理函数和内存字符串函数

    一.            字符处理函数 1.        字符处理函数:<ctype.h> int isdigit(int ch) ;//是否为数字,即ch是否是0-9中的字符 int ...

  2. 【二分答案】 【POJ3497】 【Northwestern Europe 2007】 Assemble 组装电脑

    Assemble Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3171   Accepted: 1013 Descript ...

  3. background小结

    CSS背景属性Background详解 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. ...

  4. iOS 性能优化:Instruments

    对于每位 iOS 开发者来说,代码性能是个避不开的话题.随着项目的扩大和功能的增多,没经过认真调试和优化的代码,要么任性地卡顿运行,要么低调地崩溃了之……结果呢,大家用着不高兴,开发者也不开心. 其实 ...

  5. F - The Circumference of the Circle

    Description To calculate the circumference of a circle seems to be an easy task - provided you know ...

  6. ajax数据显示,使用js通用模板

    最近用ajax获取数据,上级要求要自己写一个js模板,以往看到的js模板,大都数都是在js里面拼接的,现在换一种比较简单的写法, 通过ajax获取数据源,js模板循环显示数据 function Get ...

  7. Java中加载配置文件的集中方式,以及利用ClassLoader加载文件 .

    我们往常进行文件的加载的时候 用到的都是  FileInputStream进行 文件的加载比如下面一个例子 : InputStream in=FileInputStream("1.prope ...

  8. SSO单点登录PHP简单版

    前面做了一个新项目,需要用户资源可以需要共享.由于之前没有做过这样的东西,回家之后,立马网站百度"单点登录".帖子很多,甄别之后,这里列几篇认为比较有营养. http://blog ...

  9. iframe自适应高度的多种方法方法小结(转)

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

  10. drupal7创始人root忘记密码的解决办法

    在index.php中的drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);之后加入 require_once 'includes/password.inc'; echo ...