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中文逗号转英文实现
Feb 11 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
织梦模板标记简介
2007/03/11 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
深入浅析python with语句简介
2018/04/11 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
七年级生物教学反思
2014/01/30 职场文书
车辆工程专业求职信
2014/04/28 职场文书
2014年新教师工作总结
2014/11/08 职场文书
委托证明范本
2014/11/25 职场文书
少先队工作总结2015
2015/05/13 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python