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 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
Angular性能优化之第三方组件和懒加载技术
May 10 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 获取mysql数据库信息代码
2009/03/12 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
php和html的区别点详细总结
2019/09/24 PHP
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
Python中函数的用法实例教程
2014/09/08 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python连接Redis的基本配置方法
2018/09/13 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
为什么python比较流行
2020/06/19 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
商场中秋节广播稿
2014/01/17 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
家电业务员岗位职责
2014/03/10 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
学生会工作感言
2015/08/07 职场文书
小学数学国培研修日志
2015/11/13 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers