使用jquery獲取網(wǎng)頁中圖片高度的兩種方法
$("img").whith();(返回純數(shù)字)
$("img").css("width");(返回字符串:數(shù)字+"px")
但是有時候會遇到返回0的情況,上面方法返回值竟然是0或者0px,很讓人詫異
方法一
在很早之前,我使用的解決方法,這也是我的師傅告訴我的解決方法:在你需要獲取到的圖片的<img>標(biāo)簽上加上width屬性,或者在css中寫出來圖片的告訴,這樣就可以了,所以每次我要去獲取一個圖片的高度的時候,都需要去先測量一下圖片的高度,然后寫到網(wǎng)頁中,這樣才可以,是不是很笨拙啊,下面我們來看第二個方法。
方法二
最近在看Learning jQuery英文版原著,正因?yàn)橐贿叿g,一邊閱讀,所以每一頁都看的很仔細(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í)行的,如果你想獲取到一些資源的信息,這個時候是沒有辦法的哦
- 使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
- jQuery獲取file控件中圖片的寬高與大小
- 基于jQuery的圖片大小自動適應(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ù)覽效果簡單示例
- 簡單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- JQuery Jcrop 實(shí)現(xiàn)圖片裁剪的插件
- jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能
- 基于Jquery的簡單圖片切換效果
- jQuery實(shí)現(xiàn)判斷上傳圖片類型和大小的方法示例
相關(guān)文章
使用微信內(nèi)置瀏覽器點(diǎn)擊下拉框出現(xiàn)頁面亂跳轉(zhuǎn)現(xiàn)象(iphone),該怎么辦
這篇文章主要介紹了使用微信內(nèi)置瀏覽器點(diǎn)擊下拉框出現(xiàn)頁面亂跳轉(zhuǎn)現(xiàn)象(iphone),該怎么辦的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)彈窗居中效果類似alert()
本文給大家分享基于jquery實(shí)現(xiàn)彈窗居中效果類似于alert(),代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的的朋友參考下2017-02-02jQuery 屬性選擇器element[herf*=''value'']使用示例
一個針對jQuery屬性選擇器的小例子,增加對jQUery屬性選擇器的理解,感興趣的朋友可以參考下2013-10-10jquery追加元素的所有方法全面深入實(shí)例講解(append、prepend、after、before、wrap等等)
幾乎所有網(wǎng)站的開發(fā)都離不開jQuery,jQuery可以很方便的實(shí)現(xiàn)網(wǎng)頁中的一些效果,也很輕松的對網(wǎng)頁中的一些DIV元素進(jìn)行添加,修改或刪除的操作。由于不同位置追加元素的代碼不一樣,本文實(shí)例講解如何對網(wǎng)頁中某個指定的DIV進(jìn)行元素的追加操作。2023-03-03jQuery Chart圖表制作組件Highcharts用法詳解
這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細(xì)分析了Highcharts插件的功能與具體使用技巧及相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-06-06ASP.NET jQuery 實(shí)例13 原創(chuàng)jQuery文本框字符限制插件-TextArea Counter
這節(jié)介紹一個自己寫的jQuery文本框字符限制插件,至于如何寫插件,我這里就不多講了,可以查看相關(guān)介紹,這里主要介紹下該插件的功能2012-02-02解析jquery easyui tree異步加載子節(jié)點(diǎn)問題
本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點(diǎn)問題,easyui中的樹可以從標(biāo)記中建立,也可以通過指定一個URL屬性讀取數(shù)據(jù)建立,有興趣的可以了解一下。2017-03-033Z版基于jquery的圖片復(fù)選框(asp.net+jquery)
最近在做一個彩票縮水工具,找了幾個圖片復(fù)選框插件始終感覺不太滿意,自己動手山寨了一下imageTick插件.2010-04-04