使用jquery擷取網頁中圖片的高度——解惑

jQuery擷取網頁中圖片的高度

使用jquery擷取網頁中圖片的高度其實很簡單，有兩種常用的方法都可以打到我們的目的

$("img").whith();（返回純數字）$("img").css("width");（返回字串：數字+"px"）

但是有時候會遇到返回0的情況，上面方法返回值竟然是0或者0px，很讓人詫異

• 方法一

  在很早之前，我使用的解決方案，這也是我的師傅告訴我的解決方案：在你需要擷取到的圖片的<img>標籤上加上width屬性，或者在css中寫出來圖片的告訴，這樣就可以了，所以每次我要去擷取一個圖片的高度的時候，都需要去先測量一片的高度，然後寫到網頁中，這樣才可以，是不是很笨拙啊，下面我們來看第二個方法。

• 方法二最近在看Learning jQuery英文版原著，正因為一邊翻譯，一邊閱讀，所以每一頁都看的很仔細，於是終於仔細閱讀體會了以下兩種常用的jquery事件載入的方法

  第一個呢，是在DOM結構渲染完成以後調用的，這時候網頁中一些資源還沒有載入，比片等資源，但是DOM結構已經渲染成功了

  第二個呢，是在網頁DOM結構渲染完成，而且資源已經載入成功以後調用的。

  有沒有感受出區別來呢，一個是在資源沒有載入的時候調用的，一個是在資源載入結束，頁面已經渲染之後調用的，所以當我們在$(function(){})調用$('img').width()的時候，由於圖片還沒有載入，所以這時候<img>標籤的高度就是0，所以返回值就是0。但是當你用window.onload=function(){}調用的時候，圖片已經載入出來了，所以這時候就能得到圖片的高度。

  所以記得，$(function(){})是在DOM渲染結束，資源還沒有載入的時候執行的，如果你想擷取到一些資源的資訊，這個時候是沒有辦法的哦