关于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 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
Javascript call及apply应用场景及实例
Aug 26 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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php中常用的预定义变量小结
2012/05/09 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
Underscore源码分析
2015/12/30 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python 为什么说eval要慎用
2019/03/26 Python
python 有效的括号的实现代码示例
2019/11/11 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
python sleep和wait对比总结
2021/02/03 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
一年级班主任寄语
2014/01/19 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android