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


Posted in Javascript onNovember 09, 2009

最近在学习JS的OOP所以写了这么个东西
使用方法:
$(".viewArea img").zoom({height:74,width:103});
效果演示:
http://demo.3water.com/html/jquery_img/jquery_img.htm
代码:

(function($){ 
$.fn.zoom = function(settings){ 
//一些默认配置; 
settings = $.extend({ 
height:0, 
width:0, 
loading:"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 图片延迟加载并等比缩放插件
Javascript 相关文章推荐
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
js的2种继承方式详解
Mar 04 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
让Firefox支持event对象实现代码
Nov 07 #Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 #Javascript
JavaScript 变量基础知识
Nov 07 #Javascript
表格 隔行换色升级版
Nov 07 #Javascript
csdn 论坛技术区平均给分功能
Nov 07 #Javascript
在js中单选框和复选框获取值的方式
Nov 06 #Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 #Javascript
You might like
深入php常用函数的使用汇总
2013/06/08 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
用jquery仿做发微博功能示例
2014/04/18 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
详解Node.js串行化流程控制
2017/05/04 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python如何实时获取tcpdump输出
2020/09/16 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
感恩教育活动总结
2014/05/05 职场文书
企业战略合作意向书
2015/05/08 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python