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 json 新手入门文档
Dec 03 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
js中int和string数据类型互相转化实例
Jan 16 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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的ddos攻击解决方法
2015/01/08 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
加拿大留学自荐信
2014/01/28 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
教师节祝酒词
2015/08/11 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python