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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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异常处理使用示例
2014/02/25 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php实现中文转数字
2016/02/18 PHP
php强制下载文件函数
2016/08/24 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
python更新列表的方法
2015/07/28 Python
python 中split 和 strip的实例详解
2017/07/12 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python多进程实现进程间通信实例
2017/11/24 Python
Django中的ajax请求
2018/10/19 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python调用webservice接口的实现
2019/07/12 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
大学生撤销处分思想汇报
2014/09/12 职场文书
团拜会主持词
2015/07/04 职场文书
爱国教育主题班会
2015/08/14 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL