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的语言特性分析
Apr 11 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
Three.js学习之几何形状
Aug 01 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 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 fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP内核探索:变量概述
2014/01/30 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php接口隔离原则实例分析
2019/11/11 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
js tab效果的实现代码
2009/12/26 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python图像处理之反色实现方法
2015/05/30 Python
利用python实现数据分析
2017/01/11 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
运动员口号
2014/06/09 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
起诉书格式范文
2015/05/20 职场文书
欢送会主持词
2015/07/01 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS