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 HTML中的table
Apr 15 Javascript
JavaScript 事件系统
Jul 22 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
javascript定时器完整实例
Feb 10 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
angular directive的简单使用总结
May 24 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
js实现文章目录索引导航(table of content)
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
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
纯javascript版日历控件
2016/11/24 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
小程序自定义日历效果
2018/12/29 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python通过floor函数舍弃小数位的方法
2015/03/17 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
python 发送get请求接口详解
2020/11/17 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
数控技术学生的自我评价
2014/02/15 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
给校长的建议书300字
2014/05/16 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python