关于JS判断图片是否加载完成且获取图片宽度的方法


Posted in Javascript onApril 09, 2013

做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用js中Image对象,通过 onload 事件和 onreadystatechange 来进行判断。

(1)第一中方法,通过onload事件,比如:

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>

(2)第二种方法,使用 onreadystatechange 来判断

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
}
</script>
<div id="mypic">onloading……</div>
Javascript 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
mocha的时序规则讲解
Feb 16 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 Javascript
关于JavaScript中的关联数组分析
Apr 09 #Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 #Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 #Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 #Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 #Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 #Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 #Javascript
You might like
php的一些小问题
2010/07/03 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
Vue异步加载about组件
2017/10/31 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python画图学习入门教程
2016/07/01 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
车间副主任岗位职责
2013/12/24 职场文书
酒店营销策划方案
2014/02/07 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
2015年教师节广播稿
2015/08/19 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android