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 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
详解CocosCreator项目结构机制
Apr 14 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
JS数组求和的常用方法实例小结
2019/01/07 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
编写Python的web框架中的Model的教程
2015/04/29 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
计算机工程学院个人求职信
2013/10/05 职场文书
报社实习生自荐信
2014/01/24 职场文书
思想品德自我评价
2014/02/04 职场文书
新春寄语大全
2014/04/09 职场文书
提拔干部考察材料
2014/05/26 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
岗位聘任协议书
2015/09/21 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Python中的tkinter库简单案例详解
2022/01/22 Python