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