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实现获取浏览器版本、浏览器类型
Dec 02 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
微信小程序实现单选功能
Oct 30 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
拼音码表的生成
2006/10/09 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python 以16进制打印输出的方法
2018/07/09 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
简单了解python单例模式的几种写法
2019/07/01 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
新锐科技Java程序员面试题
2016/07/25 面试题
学生会竞选自荐信
2013/10/12 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
药店促销活动策划方案
2014/08/24 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
债务纠纷起诉书
2015/05/20 职场文书
任命书格式模板
2015/09/22 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
详解Vue的options
2021/05/15 Vue.js