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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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 session 存储方式的详细介绍
2013/06/25 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
数控技术专业推荐信
2013/11/01 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
给校长的建议书100字
2014/05/16 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
工会工作先进事迹
2014/08/18 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP