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的web页面日期格式化插件
Nov 15 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
js简易版购物车功能
Jun 17 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
Vue渲染过程浅析
Mar 14 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
让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脚本的10个技巧(4)
2006/10/09 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
以太网Ethernet IEEE802.3
2013/08/05 面试题
法学专业应届生求职信
2013/10/16 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
财产保全担保书
2015/01/20 职场文书
检讨书模板大全
2015/05/07 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript