jQuery图片预加载 等比缩放实现代码


Posted in Javascript onOctober 04, 2011
/* 
* Image preload and auto zoom 
* scaling 是否等比例自动缩放 
* width 图片最大高 
* height 图片最大宽 
* loadpic 加载中的图片路径 
* example $("*").LoadImage(true,w,h); 
*/ 
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ 
if(loadpic==null)loadpic="../images/loading.gif"; 
return this.each(function(){ 
var t=$(this); 
var src=$(this).attr("src") 
var img=new Image(); 
//alert("Loading...") 
img.src=src; 
//自动缩放图片 
var autoScaling=function(){ 
if(scaling){ 
if(img.width>0 && img.height>0){ 
if(img.width/img.height>=width/height){ 
if(img.width>width){ 
t.width(width); 
t.height((img.height*width)/img.width); 
t.css("margin-top", (height-t.height())/2); 
}else{ 
t.width(img.width); 
t.height(img.height); 
t.css("margin-top", (height-t.height())/2); 
} 
} 
else{ 
if(img.height>height){ 
t.height(height); 
t.width((img.width*height)/img.height); 
t.css("margin-top", (height-t.height())/2); 
}else{ 
t.width(img.width); 
t.height(img.height); 
t.css("margin-top", (height-t.height())/2); 
} 
} 
} 
} 
} 
//处理ff下会自动读取缓存图片 
if(img.complete){ 
//alert("getToCache!"); 
autoScaling(); 
return; 
} 
$(this).attr("src",""); 
var loading=$("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" />"); 
t.hide(); 
t.after(loading); 
$(img).load(function(){ 
autoScaling(); 
loading.remove(); 
t.attr("src",this.src); 
t.show(); 
//alert("finally!") 
}); 
}); 
}
Javascript 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
JScript的条件编译
May 29 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 #Javascript
Dom 结点创建 基础知识
Oct 01 #Javascript
JavaScript 的继承
Oct 01 #Javascript
Jquery 的扩展方法总结
Oct 01 #Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 #Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 #Javascript
JQuery获取文本框中字符长度的代码
Sep 29 #Javascript
You might like
php文件怎么打开 如何执行php文件
2011/12/21 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
高中自我评价分享
2013/12/05 职场文书
九年级历史教学反思
2014/01/27 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
英文辞职信范文
2015/05/13 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
python ansible自动化运维工具执行流程
2021/06/24 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS