JavaScript判断图片加载完成并获取宽度的两种方法

JavaScript判断图片加载完成并获取宽度的两种方法

在Web开发过程中，经常遇到用户上传的图片尺寸过大，导致网页内容区域被撑破的问题。针对这一情况，可以通过JavaScript在客户端图片下载完成后，适时对图片的宽度或高度进行相应处理。JS处理图片的核心在于利用JavaScript中的Image对象，并通过onload事件和onreadystatechange事件来实现加载状态的判断。

通过onload事件判断

第一种方法是通过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>

通过onreadystatechange事件判断

第二种方法则是使用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>