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è)文件全部內(nèi)容全部加載好后再運(yùn)行腳本。
網(wǎng)上搜索一下后,發(fā)現(xiàn)這哥么http://www.dbjr.com.cn/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è)文件全部內(nèi)容全部加載好后再運(yùn)行腳本。
網(wǎng)上搜索一下后,發(fā)現(xiàn)這哥么http://www.dbjr.com.cn/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)文章
jquery Ajax實(shí)現(xiàn)Select動(dòng)態(tài)添加數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jquery Ajax實(shí)現(xiàn)Select動(dòng)態(tài)添加數(shù)據(jù)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01jQuery獲取所有父級(jí)元素及同級(jí)元素及子元素的方法(推薦)
這篇文章主要介紹了jQuery獲取所有父級(jí)元素及同級(jí)元素及子元素的方法,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-01-01jQuery源碼分析之jQuery.fn.each與jQuery.each用法
這篇文章主要介紹了jQuery源碼分析之jQuery.fn.each與jQuery.each用法,較為詳細(xì)的分析了each的用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法
本篇文章主要是對(duì)jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12jquery實(shí)現(xiàn)輸入框動(dòng)態(tài)增減的實(shí)例代碼
主要功能是動(dòng)態(tài)增減輸入框,而且支持對(duì)各個(gè)輸入框的檢測,每個(gè)輸入框在輸入內(nèi)容后,對(duì)其進(jìn)行錯(cuò)誤提示2013-07-07

輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證
輕松學(xué)習(xí)jQuery插件EasyUI,本文的重點(diǎn)在于EasyUI表單驗(yàn)證,并告訴大家如何提交表單,感興趣的小伙伴們可以參考一下
2015-12-12