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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
js模拟类继承小例子
Jul 17 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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 Cookie的使用教程详解
2013/06/03 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
历史学专业个人的自我评价
2013/10/13 职场文书
网络维护管理员的自我评价分享
2013/11/11 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
森林防火宣传标语
2014/06/27 职场文书
企业愿景口号
2015/12/25 职场文书