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学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
让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/11/16 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP 文件系统详解
2012/09/13 PHP
php二维数组排序详解
2013/11/06 PHP
开启PHP的伪静态模式
2015/12/31 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
php实现等比例压缩图片
2018/07/26 PHP
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python+Django+apache的配置方法详解
2016/06/01 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
幼儿园保育员责任书
2014/07/22 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
公司授权委托书
2014/10/17 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
项目经理岗位职责
2015/01/31 职场文书
学校社团活动总结
2015/05/07 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书