jQuery图片预加载 等比缩放实现代码


Posted in Javascript onOctober 04, 2011
/* 
* Image preload and auto zoom 
* scaling 是否等比例自动缩放 
* width 图片最大高 
* height 图片最大宽 
* loadpic 加载中的图片路径 
* example $("*").LoadImage(true,w,h); 
*/ 
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ 
if(loadpic==null)loadpic="../images/loading.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); 
t.css("margin-top", (height-t.height())/2); 
}else{ 
t.width(img.width); 
t.height(img.height); 
t.css("margin-top", (height-t.height())/2); 
} 
} 
else{ 
if(img.height>height){ 
t.height(height); 
t.width((img.width*height)/img.height); 
t.css("margin-top", (height-t.height())/2); 
}else{ 
t.width(img.width); 
t.height(img.height); 
t.css("margin-top", (height-t.height())/2); 
} 
} 
} 
} 
} 
//处理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!") 
}); 
}); 
}
Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 #Javascript
Dom 结点创建 基础知识
Oct 01 #Javascript
JavaScript 的继承
Oct 01 #Javascript
Jquery 的扩展方法总结
Oct 01 #Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 #Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 #Javascript
JQuery获取文本框中字符长度的代码
Sep 29 #Javascript
You might like
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP 裁剪图片
2021/03/09 PHP
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
跟老齐学Python之做一个小游戏
2014/09/28 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python ubplot使用方法解析
2020/01/10 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
班级安全教育实施方案
2014/02/23 职场文书
骨干教师考核方案
2014/05/09 职场文书
住房租房协议书
2014/08/20 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
《落花生》教学反思
2016/02/16 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server