JS自动缩小超出大小的图片


Posted in Javascript onOctober 12, 2012
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ 
if(loadpic==null)loadpic="../img/loading.gif"; 
return this.each(function(){ 
var t=$(this); 
var src=$(this).attr("src") 
var img=new Image(); 
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){ 
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(); 
}); 
} ); 
} 
</script> 
<div id="content"><img src="img/20120518073933709.jpg"/></div> 
<script type="text/javascript"> 
<!-- 
$(window).load(function(){ 
$('#content img').LoadImage(true, 600,500,'img/loading.gif'); 
}); 
//--> 
</script>
Javascript 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 #Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 #Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 #Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 #Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 #Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 #Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 #Javascript
You might like
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
JavaScript 的继承
2011/10/01 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python3+Appium安装使用教程
2019/07/05 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python画图常规设置方式
2020/03/05 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
大专学生推荐信范文
2013/11/19 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
元旦活动感言
2014/03/08 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
优质服务演讲稿
2014/05/14 职场文书
出国签证在职证明
2014/09/20 职场文书
法制教育观后感
2015/06/17 职场文书