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 AJAX提交中文乱码的解决方案
Jul 02 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
用原生js做单页应用
Jan 17 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
Javascript webpack动态import
Apr 19 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中逗号与点号的区别
2013/08/05 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
详解Nodejs之npm&package.json
2017/06/15 NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
销售工作人员的自我评价分享
2013/11/10 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
企业党员个人自我评价
2014/09/20 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫