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 var变量隐式声明方法
Oct 19 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
vue实现五子棋游戏
May 28 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
javascript中的self和this用法小结
2014/02/08 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
django 外键model的互相读取方法
2018/12/15 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
大学生村官任职感言
2014/01/09 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
2014年元旦感言
2014/03/06 职场文书
经营理念口号
2014/06/21 职场文书
音乐教师求职信
2014/06/28 职场文书
学术会议通知
2015/04/15 职场文书
会议通知范文
2015/04/15 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python