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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
vue中render函数的使用详解
Oct 12 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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/05/10 PHP
php按单词截取字符串的方法
2015/04/07 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
python多线程用法实例详解
2015/01/15 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
pandas带有重复索引操作方法
2018/06/08 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python实现批量注册网站用户的示例
2019/02/22 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
函授教育个人学习的自我评价
2013/12/31 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
供货协议书
2014/04/22 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript