使用jquery獲取網(wǎng)頁中圖片高度的兩種方法

更新時(shí)間：2013年09月26日 17:19:30 作者：

使用jquery獲取網(wǎng)頁中圖片的高度其實(shí)很簡(jiǎn)單，目前有兩種不錯(cuò)的方法可以實(shí)現(xiàn)，下面為大家詳細(xì)介紹下，有所疑惑的你可以參考下

使用jquery獲取網(wǎng)頁中圖片的高度其實(shí)很簡(jiǎn)單，有兩種常用的方法都可以打到我們的目的

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

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

方法一

在很早之前，我使用的解決方法，這也是我的師傅告訴我的解決方法：在你需要獲取到的圖片的<img>標(biāo)簽上加上width屬性，或者在css中寫出來圖片的告訴，這樣就可以了，所以每次我要去獲取一個(gè)圖片的高度的時(shí)候，都需要去先測(cè)量一下圖片的高度，然后寫到網(wǎng)頁中，這樣才可以，是不是很笨拙啊，下面我們來看第二個(gè)方法。

方法二

最近在看Learning jQuery英文版原著，正因?yàn)橐贿叿g，一邊閱讀，所以每一頁都看的很仔細(xì)，于是終于仔細(xì)閱讀體會(huì)了以下兩種常用的jquery事件加載的方法

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

 
$(function(){}); 
window.onload=function(){} 

第一個(gè)呢，是在DOM結(jié)構(gòu)渲染完成以后調(diào)用的，這時(shí)候網(wǎng)頁中一些資源還沒有加載，比如圖片等資源，但是DOM結(jié)構(gòu)已經(jīng)渲染成功了
第二個(gè)呢，是在網(wǎng)頁DOM結(jié)構(gòu)渲染完成，而且資源已經(jīng)加載成功以后調(diào)用的。

有沒有感受出區(qū)別來呢，一個(gè)是在資源沒有加載的時(shí)候調(diào)用的，一個(gè)是在資源加載結(jié)束，頁面已經(jīng)渲染之后調(diào)用的，所以當(dāng)我們?cè)?(function(){})調(diào)用$('img').width()的時(shí)候，由于圖片還沒有加載，所以這時(shí)候<img>標(biāo)簽的高度就是0，所以返回值就是0。但是當(dāng)你用window.onload=function(){}調(diào)用的時(shí)候，圖片已經(jīng)加載出來了，所以這時(shí)候就能得到圖片的高度。

所以記得，$(function(){})是在DOM渲染結(jié)束，資源還沒有加載的時(shí)候執(zhí)行的，如果你想獲取到一些資源的信息，這個(gè)時(shí)候是沒有辦法的哦

您可能感興趣的文章:

相關(guān)文章

jquery UI Datepicker時(shí)間控件的使用及問題解決
這篇文章主要介紹了jquery UI Datepicker時(shí)間控件的使用及與asp.net中的UpdatePanel聯(lián)合使用時(shí)的失效問題解決，感興趣的小伙伴們可以參考一下
2016-04-04
jquery html動(dòng)態(tài)添加的元素綁定事件詳解
下面小編就為大家?guī)硪黄猨query html動(dòng)態(tài)添加的元素綁定事件詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格
下面小編就為大家?guī)硪黄獪\談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
jQuery實(shí)現(xiàn)網(wǎng)頁拼圖游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)網(wǎng)頁拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
jQuery實(shí)現(xiàn)Ajax聊天機(jī)器人完成案例
從微信開發(fā)的時(shí)候,有了一個(gè)與人對(duì)話的機(jī)器人之后，本文主要實(shí)現(xiàn)jQuery實(shí)現(xiàn)Ajax聊天機(jī)器人完成案例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
jquery.cookie.js的介紹與使用方法
相信大家都知道jquery.cookie.js是一個(gè)輕量級(jí)的cookie 插件，可以讀取、寫入、刪除 cookie。下面這篇文章就來給大家簡(jiǎn)單的介紹下關(guān)于jquery.cookie.js的介紹與使用方法，需要的朋友可以參考借鑒，一起來看看吧。
2017-02-02
jquery將信息遍歷到界面上實(shí)例代碼
在本篇文章里小編給大家整理了關(guān)于jquery如何將信息遍歷到界面上的實(shí)例代碼內(nèi)容，需要的朋友們可以參考下。
2020-01-01
jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實(shí)現(xiàn)上拉刷新下拉加載更多頁面的呢？下面小編通過下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理，需要的朋友可以參考下
2015-08-08
JS 遍歷 json 和 JQuery 遍歷json操作完整示例
這篇文章主要介紹了JS 遍歷 json 和 JQuery 遍歷json操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript與jQuery遍歷json格式數(shù)據(jù)的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-11-11
使用jQuery制作基礎(chǔ)的Web圖片輪播效果
這篇文章主要介紹了使用jQuery制作基礎(chǔ)的Web圖片輪播效果的實(shí)例,鼠標(biāo)懸停時(shí)可停止而離開時(shí)可自動(dòng)輪播,文中還介紹了一種使用zslider插件來實(shí)現(xiàn)的方法,比較犀利,需要的朋友可以參考下
2016-04-04