使用jquery獲取網(wǎng)頁中圖片高度的兩種方法
更新時間：2013年09月26日 17:19:30 作者：
使用jquery獲取網(wǎng)頁中圖片的高度其實很簡單，目前有兩種不錯的方法可以實現(xiàn)，下面為大家詳細(xì)介紹下，有所疑惑的你可以參考下
使用jquery獲取網(wǎng)頁中圖片的高度其實很簡單，有兩種常用的方法都可以打到我們的目的
$("img").whith();（返回純數(shù)字）
$("img").css("width");（返回字符串：數(shù)字+"px"）
但是有時候會遇到返回0的情況，上面方法返回值竟然是0或者0px，很讓人詫異
方法一
在很早之前，我使用的解決方法，這也是我的師傅告訴我的解決方法：在你需要獲取到的圖片的<img>標(biāo)簽上加上width屬性，或者在css中寫出來圖片的告訴，這樣就可以了，所以每次我要去獲取一個圖片的高度的時候，都需要去先測量一下圖片的高度，然后寫到網(wǎng)頁中，這樣才可以，是不是很笨拙啊，下面我們來看第二個方法。
方法二
最近在看Learning jQuery英文版原著，正因為一邊翻譯，一邊閱讀，所以每一頁都看的很仔細(xì)，于是終于仔細(xì)閱讀體會了以下兩種常用的jquery事件加載的方法
$(function(){});
window.onload=function(){}
第一個呢，是在DOM結(jié)構(gòu)渲染完成以后調(diào)用的，這時候網(wǎng)頁中一些資源還沒有加載，比如圖片等資源，但是DOM結(jié)構(gòu)已經(jīng)渲染成功了
第二個呢，是在網(wǎng)頁DOM結(jié)構(gòu)渲染完成，而且資源已經(jīng)加載成功以后調(diào)用的。
有沒有感受出區(qū)別來呢，一個是在資源沒有加載的時候調(diào)用的，一個是在資源加載結(jié)束，頁面已經(jīng)渲染之后調(diào)用的，所以當(dāng)我們在$(function(){})調(diào)用$('img').width()的時候，由于圖片還沒有加載，所以這時候<img>標(biāo)簽的高度就是0，所以返回值就是0。但是當(dāng)你用window.onload=function(){}調(diào)用的時候，圖片已經(jīng)加載出來了，所以這時候就能得到圖片的高度。
所以記得，$(function(){})是在DOM渲染結(jié)束，資源還沒有加載的時候執(zhí)行的，如果你想獲取到一些資源的信息，這個時候是沒有辦法的哦
復(fù)制代碼 代碼如下:
$("img").whith();（返回純數(shù)字）
$("img").css("width");（返回字符串：數(shù)字+"px"）
但是有時候會遇到返回0的情況，上面方法返回值竟然是0或者0px，很讓人詫異
方法一
在很早之前，我使用的解決方法，這也是我的師傅告訴我的解決方法：在你需要獲取到的圖片的<img>標(biāo)簽上加上width屬性，或者在css中寫出來圖片的告訴，這樣就可以了，所以每次我要去獲取一個圖片的高度的時候，都需要去先測量一下圖片的高度，然后寫到網(wǎng)頁中，這樣才可以，是不是很笨拙啊，下面我們來看第二個方法。
方法二
最近在看Learning jQuery英文版原著，正因為一邊翻譯，一邊閱讀，所以每一頁都看的很仔細(xì)，于是終于仔細(xì)閱讀體會了以下兩種常用的jquery事件加載的方法
復(fù)制代碼 代碼如下:
$(function(){});
window.onload=function(){}
第一個呢，是在DOM結(jié)構(gòu)渲染完成以后調(diào)用的，這時候網(wǎng)頁中一些資源還沒有加載，比如圖片等資源，但是DOM結(jié)構(gòu)已經(jīng)渲染成功了
第二個呢，是在網(wǎng)頁DOM結(jié)構(gòu)渲染完成，而且資源已經(jīng)加載成功以后調(diào)用的。
有沒有感受出區(qū)別來呢，一個是在資源沒有加載的時候調(diào)用的，一個是在資源加載結(jié)束，頁面已經(jīng)渲染之后調(diào)用的，所以當(dāng)我們在$(function(){})調(diào)用$('img').width()的時候，由于圖片還沒有加載，所以這時候<img>標(biāo)簽的高度就是0，所以返回值就是0。但是當(dāng)你用window.onload=function(){}調(diào)用的時候，圖片已經(jīng)加載出來了，所以這時候就能得到圖片的高度。
所以記得，$(function(){})是在DOM渲染結(jié)束，資源還沒有加載的時候執(zhí)行的，如果你想獲取到一些資源的信息，這個時候是沒有辦法的哦
您可能感興趣的文章:
- 使用jQuery實現(xiàn)驗證上傳圖片的格式與大小
- jQuery獲取file控件中圖片的寬高與大小
- 基于jQuery的圖片大小自動適應(yīng)實現(xiàn)代碼
- 基于jquery實現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
- jquery預(yù)覽圖片實現(xiàn)鼠標(biāo)放上去顯示實際大小
- jQuery實現(xiàn)的上傳圖片本地預(yù)覽效果簡單示例
- 簡單實現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- JQuery Jcrop 實現(xiàn)圖片裁剪的插件
- jquery實現(xiàn)圖片上傳前本地預(yù)覽功能
- 基于Jquery的簡單圖片切換效果
- jQuery實現(xiàn)判斷上傳圖片類型和大小的方法示例
相關(guān)文章
jquery UI Datepicker時間控件的使用及問題解決
這篇文章主要介紹了jquery UI Datepicker時間控件的使用及與asp.net中的UpdatePanel聯(lián)合使用時的失效問題解決，感興趣的小伙伴們可以參考一下2016-04-04
下面小編就為大家?guī)硪黄猨query html動態(tài)添加的元素綁定事件詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
淺談MVC+EF easyui dataGrid 動態(tài)加載分頁表格
下面小編就為大家?guī)硪黄獪\談MVC+EF easyui dataGrid 動態(tài)加載分頁表格。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)網(wǎng)頁拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
從微信開發(fā)的時候,有了一個與人對話的機器人之后，本文主要實現(xiàn)jQuery實現(xiàn)Ajax聊天機器人完成案例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
相信大家都知道jquery.cookie.js是一個輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。下面這篇文章就來給大家簡單的介紹下關(guān)于jquery.cookie.js的介紹與使用方法，需要的朋友可以參考借鑒，一起來看看吧。2017-02-02
在本篇文章里小編給大家整理了關(guān)于jquery如何將信息遍歷到界面上的實例代碼內(nèi)容，需要的朋友們可以參考下。2020-01-01
jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實現(xiàn)上拉刷新下拉加載更多頁面的呢？下面小編通過下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理，需要的朋友可以參考下2015-08-08
JS 遍歷 json 和 JQuery 遍歷json操作完整示例
這篇文章主要介紹了JS 遍歷 json 和 JQuery 遍歷json操作,結(jié)合完整實例形式詳細(xì)分析了JavaScript與jQuery遍歷json格式數(shù)據(jù)的簡單實現(xiàn)技巧,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了使用jQuery制作基礎(chǔ)的Web圖片輪播效果的實例,鼠標(biāo)懸停時可停止而離開時可自動輪播,文中還介紹了一種使用zslider插件來實現(xiàn)的方法,比較犀利,需要的朋友可以參考下2016-04-04