快捷導(dǎo)航

JS獲取圖片高度寬度的方法分享

更新時間：2015年04月17日 11:35:10 投稿：hebedich

這篇文章主要介紹了JS獲取圖片高度寬度的方法，開始的時候沒能做到兼容chrome，在度娘和眾網(wǎng)友的幫助下，最終完成了完美兼容，這里分享給大家，有需要的小伙伴可以參考下。

一般獲取圖片高度寬度的寫法：

var img = new Image();

img.src = imgsrc;

var imgWH = CalcImgTiple(img.width, img.height);

但chrome中測試無法獲取到。img.width, img.height都為0

原因:當(dāng)圖片不是本地圖片,而是網(wǎng)絡(luò)圖片
onload 在成功地裝載了圖像時調(diào)用的事件處理程序。

在做web開發(fā)，其中有一個需求：利用Javascript獲取要加載的圖片的尺寸，所以很自然的，想到了img的onload方法，在firefox下開發(fā)完成后，到IE下調(diào)試，發(fā)現(xiàn)img的onload事件很多情況下都不被調(diào)用。

最初的代碼如下：

復(fù)制代碼代碼如下:

var img = new Image;

img.src = "test.gif";

img.onload = function(){

alert ( img.width );

};

這段代碼看著沒什么問題，但是為什么onload沒有被IE調(diào)用呢？因?yàn)镮E會緩存圖片，第2次加載的圖片，不是從服務(wù)器上傳過來的，而是從緩沖區(qū)里加載的。是不是從緩沖區(qū)里加載的圖片就不觸發(fā)onload事件呢？我于是我測試了以下代碼，成功了～

復(fù)制代碼代碼如下:

var img = new Image;

img.onload = function(){

alert ( img.width );     };

img.src = "test.gif";

把onload寫到前面去，先告訴瀏覽器如何處理這張圖片，再指定這張圖片的源，這樣就正常了。所以，不是IE沒有觸發(fā)onload事件，而是因?yàn)榧虞d緩沖區(qū)的速度太快，以至于沒有運(yùn)行到img.onload的時候，onload事件已經(jīng)觸發(fā)了。這讓想到了Ajax，在寫xmlhttp的時候，都是先指定onstatechange的回調(diào)函數(shù)，然后再send數(shù)據(jù)的，道理是一樣的

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: