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 相关文章推荐
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
js实现全选和全不选
Jul 28 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
python去除所有html标签的方法
2015/05/05 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python实时监控cpu小工具
2018/06/21 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
自主招生自荐信格式
2013/12/03 职场文书
企业军训感言
2014/02/08 职场文书
会计助理岗位职责
2014/02/17 职场文书
亮化工程实施方案
2014/03/17 职场文书
大班下学期个人总结
2015/02/13 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
MySql新手入门的基本操作汇总
2021/05/13 MySQL
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python