图片延迟加载并等比缩放,一个简单的JQuery插件
使用方法:
$(".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插件的更多相关文章
- 编写一个简单的Jquery插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- 手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
- 实现一个简单的Vue插件
我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- 大前端工程化之写一个简单的webpack插件
今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- JQuery 图片延迟加载并等比缩放插件
原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jque ...
- .Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器
目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不 ...
随机推荐
- Unity 调用android插件
1. Unity的Bundle Identifier必须和你的android报名一致 Activity和View的区别: Activity应该是一个展示页面,View是页面上一些按钮视图等等. 如何调 ...
- 采用标准c进行目录文件遍历
图像处理的时候经常需要对一个目录的所有图像进行处理,遍历文件得c代码: 在windows中需要使用到宽字符. 另外,可以使用opencv封装的目录访问操作,下次给出. // DirTraverse.c ...
- excel笔记
提取单元格中的数字部分 =MID(LOOKUP(1,-(1&MID(A1,MIN(FIND({0;1;2;3;4;5;6;7;8;9},A1&1/17)),ROW($1:$15)))) ...
- Oracle运维服务的四根救命稻草
企业信息化系统建设按生命周期可分为IT规划阶段.IT建设阶段和IT运维阶段,其中,IT运维阶段的时间最长,IT运维管理关乎着IT运维的质量.成本和速度,更关乎着IT系统的安全.连续和可用.大数据云计算 ...
- UINavigationController 和 UITabBarController
UINavigationController当设置根控制器的时候,意思就是把根控制器压入栈内,当我们push的时候,我们把下一个控制器压入栈内,当我们pop的时候把上面的控制器的内存释放 UITa ...
- REST总结
REST是Roy Thomas Fielding博士于2000年在他的博士论文中阐述的一种架构风格和设计原则.REST并非一种协议或者标准,事实上它只是阐述了HTTP协议的设计初衷:现在HTTP在网络 ...
- LogBoy运行截图
- SQL Server SQLOS
SQLOS 抽象出了: 1.任务高度管理子系统. 2.内存管理子系统. 3.错误,异常处理机制. 4.死锁侦测各解决机制. 5.运行第三方代码. 好处: 1.减少线种的上下文切换.空闲连接不占用线程.
- Qt中如何 编写插件 加载插件 卸载插件
Qt中如何 编写插件 加载插件 卸载插件是本文要介绍的内容.Qt提供了一个类QPluginLoader来加载静态库和动态库,在Qt中,Qt把动态库和静态库都看成是一个插件,使用QPluginLoade ...
- C语言的本质(24)——C标准库之输入与输出(下)
4.读写二进制文件 C语言还提供了用于整块数据的读写函数.可用来读写一组数据,如一个数组元素,一个结构变量的值等. 读数据块函数调用的一般形式为: fread(buffer,size,count,fp ...