關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法

更新時(shí)間：2013年04月09日 16:40:52 作者：

本篇文章小編為大家介紹，關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法，有需要的朋友可以參考一下

做web的同學(xué)們經(jīng)常會(huì)碰到客戶上傳圖片將網(wǎng)頁(yè)內(nèi)容區(qū)撐破了的情況，下面就這個(gè)問(wèn)題我們一種如何使用js處理這個(gè)問(wèn)題的方法，具體思路就是在js判斷客戶端的圖片下載完畢之后適時(shí)的對(duì)該圖片的寬度或者高度做一些處理，js處理圖片主要是利用js中Image對(duì)象，通過(guò) onload 事件和 onreadystatechange 來(lái)進(jìn)行判斷。

（1）第一中方法，通過(guò)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 來(lái)判斷

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