关于JS判断图片是否加载完成且获取图片宽度的方法
更新时间：2013年04月09日 16:40:52 作者：
本篇文章小编为大家介绍，关于JS判断图片是否加载完成且获取图片宽度的方法，有需要的朋友可以参考一下
做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>
相关文章
JS建造者模式是一种创建型设计模式,它可以用于构建复杂对象的创建过程,将对象的构建步骤和表示分离,以便能够灵活地构建不同的对象,本文将通过代码示例给大家详细的介绍一下JS建造者模式的用法,需要的朋友可以参考下2023-08-08
去除字符串左右两端的空格，在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim，但在js中却没有这3个内置方法，需要手工编写。下面的实现方法是用到了正则表达式，效率不错，并把这三个方法加入String对象的内置方法中去。2008-10-10
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下2015-11-11
在计算机网页中如果我们想获取当前页面最新的内容,可以刷新当前页面重新获取数据,这篇文章主要给大家介绍了关于JS页面刷新与重新加载功能实现(关闭当前窗口)的相关资料,需要的朋友可以参考下2023-10-10
一篇文章教你用JavaScript使用流程控制打印九九乘法表
这篇文章主要为大家详细介绍了JavaScript使用流程控制打印九九乘法表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了Promise.all中对于reject的处理方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
OpenAI的一款聊天机器人模型ChatGPT爆火，本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人。2023-02-02
这篇文章主要介绍了JavaScript检测并限制复选框选中个数的方法,涉及javascript针对复选框的判定与运算相关技巧,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了Bootstrap实现省市区三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
对于js中的对象的深拷贝在项目的开发中比较常用到,本文就来介绍一下JS深拷贝的4种实现方法,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
最新评论