chrome下jq width()方法取值為0的解決方法
更新時(shí)間：2014年05月26日 10:41:04 作者：
使用了jq的width()方法時(shí)在ff跟ie下運(yùn)行問題不大，但是到了chrome上，就出現(xiàn)問題
http://photo.163.com/shixiaojian089/train/28002 這是網(wǎng)易的一個(gè)相冊(cè)，看到后想試著做做看。
在我的制作方法中，需要獲取到每張照片的寬度，所以很自然就使用了jq的width()方法。在ff跟ie下運(yùn)行問題不大，但是到了chrome上，就出現(xiàn)問題了。
使用alert排查，發(fā)現(xiàn)chrome下width方法取到的值都是0.這樣子的話，想來就是腳本運(yùn)行到這的時(shí)候圖片根本沒加載好。問題應(yīng)該出在$(function(){});上，因?yàn)檫@個(gè)方法只要求加載完dom就開始運(yùn)行。那么改成在onload下執(zhí)行，果然這下可以了。不過這明顯不是很好的辦法，畢竟在onload下運(yùn)行要等到整個(gè)文件全部?jī)?nèi)容全部加載好后再運(yùn)行腳本。
網(wǎng)上搜索一下后，發(fā)現(xiàn)這哥么http://www.dhdzp.com/article/50402.htm也遇到了同樣的問題，在其的評(píng)論下方有一種解決方案，可以參考：
在要獲取圖片寬高的地方用
$img.load(function(){
var img_h = $img.height();
var img_w = $img.width();
}
這樣可以仍舊使用$(function(){});在需要圖片加載的地方對(duì)圖片對(duì)象調(diào)用load方法，避免等待整個(gè)文件內(nèi)容加載完畢。
在我的制作方法中，需要獲取到每張照片的寬度，所以很自然就使用了jq的width()方法。在ff跟ie下運(yùn)行問題不大，但是到了chrome上，就出現(xiàn)問題了。
使用alert排查，發(fā)現(xiàn)chrome下width方法取到的值都是0.這樣子的話，想來就是腳本運(yùn)行到這的時(shí)候圖片根本沒加載好。問題應(yīng)該出在$(function(){});上，因?yàn)檫@個(gè)方法只要求加載完dom就開始運(yùn)行。那么改成在onload下執(zhí)行，果然這下可以了。不過這明顯不是很好的辦法，畢竟在onload下運(yùn)行要等到整個(gè)文件全部?jī)?nèi)容全部加載好后再運(yùn)行腳本。
網(wǎng)上搜索一下后，發(fā)現(xiàn)這哥么http://www.dhdzp.com/article/50402.htm也遇到了同樣的問題，在其的評(píng)論下方有一種解決方案，可以參考：
在要獲取圖片寬高的地方用
復(fù)制代碼 代碼如下:
$img.load(function(){
var img_h = $img.height();
var img_w = $img.width();
}
這樣可以仍舊使用$(function(){});在需要圖片加載的地方對(duì)圖片對(duì)象調(diào)用load方法，避免等待整個(gè)文件內(nèi)容加載完畢。
相關(guān)文章
從今天起正式學(xué)習(xí)Jquery（實(shí)際嚴(yán)格講已經(jīng)用了幾個(gè)月的Jquery的一丁點(diǎn)東西），邊學(xué)邊做邊記筆記；閱讀書籍《鋒利的Jquery》+Jquery API Doc。2009-10-10
下面小編就為大家分享一篇淺談ajax請(qǐng)求不同頁面的微信JSSDK問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
基于jQuery實(shí)現(xiàn)咖啡訂單管理簡(jiǎn)單應(yīng)用
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)咖啡訂單管理的簡(jiǎn)單應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery對(duì)象與DOM對(duì)象轉(zhuǎn)換方法詳解
這篇文章主要介紹了jQuery對(duì)象與DOM對(duì)象的轉(zhuǎn)換方法,結(jié)合實(shí)例形式分析了jQuery對(duì)象及DOM對(duì)象的作用與二者的相互轉(zhuǎn)換技巧,需要的朋友可以參考下2016-05-05
根據(jù)jquery的注釋，其是匹配HTML字符串和ID選擇器2011-08-08
jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼,涉及jquery鏈?zhǔn)讲僮骷皹邮絼?dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
本文詳細(xì)講解了Jquery操作DOM元素的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
jQuery操作DOM_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了jQuery操作DOM，下面的DOM操作將圍繞上面的DOM樹進(jìn)行學(xué)習(xí)JQueryDOM操作，有興趣的可以了解一下2017-07-07
jQuery解析與處理服務(wù)器端返回xml格式數(shù)據(jù)的方法詳解
這篇文章主要介紹了jQuery解析與處理服務(wù)器端返回xml格式數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery基于ajax的get方法與后臺(tái)交互操作xml格式數(shù)據(jù)的相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2016-07-07
jquery的冒泡事件的阻止與允許(三種實(shí)現(xiàn)方法)
冒泡或默認(rèn)的事件發(fā)生,在某些時(shí)候是不需要的,在此就需要一些可以阻止冒泡和默認(rèn)的事件的方法,本文介紹三種方法做到不同程度的阻止，感興趣的朋友可以了解下，或許對(duì)你了解冒泡事件有所幫助2013-02-02