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 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
JQuery性能优化的几点建议
May 14 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
详解Python3的TFTP文件传输
2018/06/26 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
用python对excel查重
2020/12/07 Python
护士个人简历自荐信
2013/10/18 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
务虚会发言材料
2014/12/25 职场文书
初三数学教学反思
2016/02/17 职场文书