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 相关文章推荐
解密效果
Jun 23 Javascript
JS 分号引起的一段调试问题
Jun 18 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
原生js调用json方法总结
Feb 22 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php解决约瑟夫环示例
2014/04/09 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
老生常谈js数据类型
2017/08/03 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
python练习程序批量修改文件名
2014/01/16 Python
Python基础之函数用法实例详解
2014/09/10 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python实现用户答题功能
2018/01/17 Python
Python3匿名函数用法示例
2018/07/25 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
525心理活动总结
2014/07/04 职场文书
春节超市活动方案
2014/08/14 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
2014年度个人总结范文
2015/03/09 职场文书
2015年团支部工作总结
2015/04/03 职场文书
工作后的感想
2015/08/07 职场文书