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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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 cron中的批处理
2008/09/16 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
python线程池的实现实例
2013/11/18 Python
浅析Python中signal包的使用
2015/11/13 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
python requests库的使用
2021/01/06 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
管理专员自荐信
2014/01/26 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis