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 面向对象继承
Nov 26 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vscode中使用npm安装babel的方法
Aug 02 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学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
基于php下载文件的详解
2013/06/02 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python 通过pip安装Django详细介绍
2017/04/28 Python
python reduce 函数使用详解
2017/12/05 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
UNIX文件系统分类
2014/11/11 面试题
分公司经理岗位职责
2013/11/11 职场文书
股东协议书
2014/04/14 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2014年底工作总结
2014/12/15 职场文书
努力工作保证书
2015/02/28 职场文书