JS判断图片是否加载完成并获取图片宽度
发布时间：2015-05-06 编辑：jiaochengji.com
分享一例js代码，用于判断图片是否加载完成，并获取图片宽度信息，有需要的朋友做个参考。
客户上传图片将网页内容区撑破了，以下就这个问题提供一种如何使用js处理这个问题的方法。
具体思路：
在js判断客户端的图片下载完毕后，对该图片的宽度或高度做一些处理。
js处理图片主要是利用js中Image对象，通过 onload 事件和 onreadystatechange 来进行判断。
方法1，通过onload事件，例如：
复制代码 代码示例:
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.jiaochengji.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>
var obj=new Image();
obj.src="http://www.jiaochengji.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.jiaochengji.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>
var obj=new Image();
obj.src="http://www.jiaochengji.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获取图片宽高的代码
复制代码 代码示例:
<img src="" onload="alert(this.width);alert(this.height)">
您可能感兴趣的文章：
JS判断图片是否加载完成并获取图片宽度
js检测上传图片的大小
js获取图片宽高简单示例
html5 canvas和JavaScript如何实现本地截图
Js验证上传图片及扩展名的代码实例
js判断背景图片是否加载成功的简单方法
移动端利用H5实现压缩图片上传的功能
使用javascript中canvas实现拼图小游戏
jquery图片延迟加载 前端开发技能必备系列
javascript缓存图片到本地的实现代码
上一篇：JS获取图片实际宽高示例代码
下一篇：js获取图片宽高简单示例
[关闭]