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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
javascript中clone对象详解
Dec 03 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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变量修饰符static的使用
2013/06/28 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
简单实现php上传文件功能
2017/09/21 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
python 循环while和for in简单实例
2016/08/16 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python中的set实现不重复的排序原理
2018/01/24 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Django实现发送邮件功能
2019/07/18 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
经典c++面试题四
2015/05/14 面试题
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers