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

但是有時(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事件加載的方法

第一個(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)有辦法的哦

最新評(píng)論