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 attachEvent传递参数的办法
Dec 14 Javascript
JS 控件事件小结
Oct 31 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
vue 清空input标签 中file的值操作
Jul 21 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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删除数组中的特定元素的代码
2012/06/28 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
33道php常见面试题及答案
2015/07/06 PHP
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
详解node.js 事件循环
2020/07/22 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Python 在局部变量域中执行代码
2020/08/07 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
安全生产专项整治方案
2014/05/06 职场文书
开展创先争优活动总结
2014/08/28 职场文书
教师工作证明范本
2015/06/12 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript