jquery 图片预加载 自动等比例缩放插件


Posted in Javascript onDecember 25, 2008
/* 
**************图片预加载插件****************** 
///作者:没剑(2008-06-23) 
///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 
可对图片进行是否自动缩放功能 
此插件使用时可让页面先加载,而图片后加载的方式, 
解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 
///参数设置: 
scaling 是否等比例自动缩放 
width 图片最大高 
height 图片最大宽 
loadpic 加载中的图片路径 
*/ 
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ 
if(loadpic==null)loadpic="load3.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); 
}else{ 
t.width(img.width); 
t.height(img.height); 
} 
} 
else{ 
if(img.height>height){ 
t.height(height); 
t.width((img.width*height)/img.height); 
}else{ 
t.width(img.width); 
t.height(img.height); 
} 
} 
} 
} 
} 
//处理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!") 
}); 
}); 
}

使用说明:
$("div img").LoadImage(true,120,90);
效果如下:
测试地址http://img.3water.com/online/jqueryLoadImage/demo.htm
jquery 图片预加载 自动等比例缩放插件
文件打包下载
Javascript 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
jquery实现弹出层效果实例
May 19 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 #Javascript
ASP SQL防注入的方法
Dec 25 #Javascript
jQuery 位置插件
Dec 25 #Javascript
jQuery 浮动广告实现代码
Dec 25 #Javascript
jQuery 操作XML入门
Dec 25 #Javascript
jQuery 动画基础教程
Dec 25 #Javascript
javascript jQuery插件练习
Dec 24 #Javascript
You might like
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
浅析python继承与多重继承
2018/09/13 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
迎八一活动主题
2014/01/31 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
校长师德表现自我评价
2015/03/05 职场文书
交心谈心活动总结
2015/05/11 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
Java 多态分析
2022/04/26 Java/Android