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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
javascript实现简单打字游戏
Oct 29 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冒泡排序
2014/12/30 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
使用Python绘制图表大全总结
2017/02/11 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
在python中使用nohup命令说明
2020/04/16 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
房地产开发计划书
2014/01/10 职场文书
初三学习决心书
2014/03/11 职场文书
争先创优个人总结
2015/03/04 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL