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 相关文章推荐
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
php字符串截取问题
2006/11/28 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php发送与接收流文件的方法
2015/02/11 PHP
js中array的sort()方法使用介绍
2014/02/20 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
清除输入框内的空格
2016/12/21 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python多继承原理与用法示例
2018/08/23 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
django中嵌套的try-except实例
2020/05/21 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
学院书画协会部门岗位职责
2013/12/01 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
干部现实表现材料
2014/02/13 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
植树节标语
2014/06/27 职场文书
户籍证明书标准模板
2014/09/10 职场文书
初中教师个人总结
2015/02/10 职场文书
同学聚会通知短信
2015/04/20 职场文书
行政诉讼答辩状
2015/05/21 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers