使用方法:

$(".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. 解决红米等手机(移动端)无法触发touchend事件

    触屏事件的简单描述: js的触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是 pageX和 pageY,表示X坐标,Y坐标.touchs ...

  2. start_kernel——local_irq_disable

    在启动初期须要关闭CPU的IRQ,原因: 因为尚未对中断代码.向量表,中断处理器进行初始化,所以必须关闭中断. 我的源码里面定义了 CONFIG_TRACE_IRQFLAGS_SUPPORT,所以调用 ...

  3. 创建GIF loading图片

    第一步 新建一个宽80PX 高10PX的文档 第二步 做8个宽8PX的方格 黄色色值#e7a521 红色色值#ff0000(可根据自己的喜好设定) 第三步 复制7个层(共8个图层)每个图层相应改变红色 ...

  4. .NET 下成熟开源的BPM产品四款推荐

    .net下的BPM产品相比JAVA的确实不多,这里主要提4款. 1.博客园.github.codeplex上的开源的流程组件AppInOne BPM,目前已有不少的企业开始使用. 优点:产品框架较全面 ...

  5. iOS开发那些事儿(一)轮播器

    前言 市面上绝大部分的APP被打开之后映入眼帘的都是一个美轮美奂的轮播器,所以能做出一个符合需求.高效的轮播器成为了一个程序员的必备技能.所以今天的这篇博客就来谈谈轮播器这个看似简单的控件其中蕴含的道 ...

  6. ffmpeg推rtmp流到crtmpserver直播

    1. 项目需要使用ffmpeg推rtmp流至crtmpserver,然后直播./usr/bin/ffmpeg -re -loop 1 -i tmp/234.jpg -r 10 -f flv rtmp: ...

  7. C++程序设计实践指导1.9统计与替换字符串中的关键字改写要求实现

    改写要求1:将字符数组str改为字符指针p,动态开辟存储空间 改写要求2:增加统计关键字个数的函数void CountKeyWords() 改写要求3: 增加替换函数void FindKeyWords ...

  8. 无法启动计算机"."上的服务w3svc

    在启动IIS服务的时候出现错误: 无法启动计算机"."上的服务w3svc 解决方法: /* 修复错误 运行命令提示符 fsutil resource setautoreset tr ...

  9. 2015.4.10-C#入门基础(三)

    今天,我们聊一聊一些基本问题: 1.修饰符有哪些?有什么区别呢? 首先大家想到的应该是 public:特点是所属类的成员和非所属类的成员都可以访问 private:只有所属类的成员才可以访问 prot ...

  10. asp.net实现伪静态遇到的问题

    之前在一次项目(asp.net网站)中要用到伪静态技术,实现的思路大致是这样的: 在全局配置文件Global.asax(普通的类可以通过实现IHttpModule来完成)中的Application_B ...