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 相关文章推荐
setTimeout自动触发一个js的方法
Jan 15 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
php 破解防盗链图片函数
2008/12/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
ArrayList类(增强版)
2007/04/04 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python探索之创建二叉树
2017/10/25 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python实现动态数组的示例代码
2019/07/15 Python
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
程序员岗位职责
2013/11/11 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
安全责任协议书
2014/04/21 职场文书
入党综合考察材料
2014/06/02 职场文书
美术专业自荐信
2014/07/07 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript