關於JS判斷圖片是否載入完成且擷取圖片寬度的方法

做web的同學們經常會碰到客戶上傳圖片將網頁內容區撐破了的情況，下面就這個問題我們一種如何使用js處理這個問題的方法，具體思路就是在js判斷用戶端的圖片下載完畢之後適時的對該圖片的寬度或者高度做一些處理，js處理圖片主要是利用js中Image對象，通過 onload 事件和 onreadystatechange 來進行判斷。

（1）第一中方法，通過onload事件，比如：

複製代碼 代碼如下:
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.bkjia.com/uploads/allimg/131017/0Z1133F4-0.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.bkjia.com/uploads/allimg/131017/0Z1133F4-0.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>