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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
javascript 写类方式之四
Jul 05 Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
如何使用原生Js实现随机点名详解
Jan 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
使用PHP获取网络文件的实现代码
2010/01/01 PHP
初品cakephp 入门基础
2012/02/16 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
Smarty3配置及入门语法
2017/02/22 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
python实现顺时针打印矩阵
2019/03/02 Python
python实现整数的二进制循环移位
2019/03/08 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
英国著名药妆店:Superdrug
2021/02/13 全球购物
师德建设实施方案
2014/03/21 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
庆祝教师节主持词
2015/07/06 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
python开发人人对战的五子棋小游戏
2022/05/02 Python