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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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+html5+ajax实现上传图片的方法
2016/05/14 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
python如何调用java类
2020/07/05 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
行政经理的岗位职责
2013/11/23 职场文书
高三学习决心书
2014/03/11 职场文书
给校长的建议书300字
2014/05/16 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
统招统分证明
2015/06/23 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python
python缺失值填充方法示例代码
2022/12/24 Python