关于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之undefined篇(上)
Nov 22 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
详谈javascript中的cookie
Jun 03 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
7个jQuery最佳实践
Jan 12 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
angular2+node.js express打包部署的实战
Jul 27 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
javaScript实现一个队列的方法
Jul 14 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 按位与或 (^ 、&amp;)
2013/06/21 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php中this关键字用法分析
2016/12/07 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
详解react-redux插件入门
2018/04/19 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python中的Matplotlib模块入门教程
2015/04/15 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
python通过zabbix api获取主机
2018/09/17 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
元旦获奖感言
2014/03/08 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
精神病医院见习报告
2014/11/03 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
《正比例》教学反思
2016/02/23 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
教你用python实现12306余票查询
2021/06/30 Python
golang生成并解析JSON
2022/04/14 Golang
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript