關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
更新時間：2013年04月09日 16:40:52 作者：
本篇文章小編為大家介紹，關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法，有需要的朋友可以參考一下
做web的同學(xué)們經(jīng)常會碰到客戶上傳圖片將網(wǎng)頁內(nèi)容區(qū)撐破了的情況，下面就這個問題我們一種如何使用js處理這個問題的方法，具體思路就是在js判斷客戶端的圖片下載完畢之后適時的對該圖片的寬度或者高度做一些處理，js處理圖片主要是利用js中Image對象，通過 onload 事件和 onreadystatechange 來進行判斷。
（1）第一中方法，通過onload事件，比如：
復(fù)制代碼 代碼如下:
<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 來判斷
復(fù)制代碼 代碼如下:
<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>
相關(guān)文章
JS建造者模式是一種創(chuàng)建型設(shè)計模式,它可以用于構(gòu)建復(fù)雜對象的創(chuàng)建過程,將對象的構(gòu)建步驟和表示分離,以便能夠靈活地構(gòu)建不同的對象,本文將通過代碼示例給大家詳細的介紹一下JS建造者模式的用法,需要的朋友可以參考下2023-08-08
javascript trim 去空格函數(shù)實現(xiàn)代碼
去除字符串左右兩端的空格，在vbscript里面可以輕松地使用 trim、ltrim 或 rtrim，但在js中卻沒有這3個內(nèi)置方法，需要手工編寫。下面的實現(xiàn)方法是用到了正則表達式，效率不錯，并把這三個方法加入String對象的內(nèi)置方法中去。2008-10-10
HTML5 Shiv完美解決IE(IE6/IE7/IE8)不兼容HTML5標簽的方法
這篇文章主要介紹了HTML5 Shiv完美解決IE(IE6/IE7/IE8)不兼容HTML5標簽的方法,需要的朋友可以參考下2015-11-11
JS頁面刷新與重新加載功能實現(xiàn)(關(guān)閉當(dāng)前窗口)
在計算機網(wǎng)頁中如果我們想獲取當(dāng)前頁面最新的內(nèi)容,可以刷新當(dāng)前頁面重新獲取數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于JS頁面刷新與重新加載功能實現(xiàn)(關(guān)閉當(dāng)前窗口)的相關(guān)資料,需要的朋友可以參考下2023-10-10
一篇文章教你用JavaScript使用流程控制打印九九乘法表
這篇文章主要為大家詳細介紹了JavaScript使用流程控制打印九九乘法表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了Promise.all中對于reject的處理方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
html+css+js實現(xiàn)簡易版ChatGPT聊天機器人
OpenAI的一款聊天機器人模型ChatGPT爆火，本篇文章用一百行html+css+js代碼給大家制作一款簡易的聊天機器人。2023-02-02
JavaScript檢測并限制復(fù)選框選中個數(shù)的方法
這篇文章主要介紹了JavaScript檢測并限制復(fù)選框選中個數(shù)的方法,涉及javascript針對復(fù)選框的判定與運算相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
Bootstrap實現(xiàn)省市區(qū)三級聯(lián)動(親測可用)
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)省市區(qū)三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
對于js中的對象的深拷貝在項目的開發(fā)中比較常用到,本文就來介紹一下JS深拷貝的4種實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2023-10-10