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实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
javascript数组去重方法分析
Dec 15 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
Python中的默认参数详解
2015/06/24 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python的sorted用法详解
2019/06/25 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
库房管理员岗位职责
2015/02/12 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技