chrome下jq width()方法取值為0的解決方法
更新時間:2014年05月26日 10:41:04 作者:
使用了jq的width()方法時在ff跟ie下運行問題不大,但是到了chrome上,就出現(xiàn)問題
http://photo.163.com/shixiaojian089/train/28002 這是網(wǎng)易的一個相冊,看到后想試著做做看。
在我的制作方法中,需要獲取到每張照片的寬度,所以很自然就使用了jq的width()方法。在ff跟ie下運行問題不大,但是到了chrome上,就出現(xiàn)問題了。
使用alert排查,發(fā)現(xiàn)chrome下width方法取到的值都是0.這樣子的話,想來就是腳本運行到這的時候圖片根本沒加載好。問題應(yīng)該出在$(function(){});上,因為這個方法只要求加載完dom就開始運行。那么改成在onload下執(zhí)行,果然這下可以了。不過這明顯不是很好的辦法,畢竟在onload下運行要等到整個文件全部內(nèi)容全部加載好后再運行腳本。
網(wǎng)上搜索一下后,發(fā)現(xiàn)這哥么http://www.dbjr.com.cn/article/50402.htm也遇到了同樣的問題,在其的評論下方有一種解決方案,可以參考:
在要獲取圖片寬高的地方用
$img.load(function(){
var img_h = $img.height();
var img_w = $img.width();
}
這樣可以仍舊使用$(function(){});在需要圖片加載的地方對圖片對象調(diào)用load方法,避免等待整個文件內(nèi)容加載完畢。
在我的制作方法中,需要獲取到每張照片的寬度,所以很自然就使用了jq的width()方法。在ff跟ie下運行問題不大,但是到了chrome上,就出現(xiàn)問題了。
使用alert排查,發(fā)現(xiàn)chrome下width方法取到的值都是0.這樣子的話,想來就是腳本運行到這的時候圖片根本沒加載好。問題應(yīng)該出在$(function(){});上,因為這個方法只要求加載完dom就開始運行。那么改成在onload下執(zhí)行,果然這下可以了。不過這明顯不是很好的辦法,畢竟在onload下運行要等到整個文件全部內(nèi)容全部加載好后再運行腳本。
網(wǎng)上搜索一下后,發(fā)現(xiàn)這哥么http://www.dbjr.com.cn/article/50402.htm也遇到了同樣的問題,在其的評論下方有一種解決方案,可以參考:
在要獲取圖片寬高的地方用
復(fù)制代碼 代碼如下:
$img.load(function(){
var img_h = $img.height();
var img_w = $img.width();
}
這樣可以仍舊使用$(function(){});在需要圖片加載的地方對圖片對象調(diào)用load方法,避免等待整個文件內(nèi)容加載完畢。
相關(guān)文章
jquery Ajax實現(xiàn)Select動態(tài)添加數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jquery Ajax實現(xiàn)Select動態(tài)添加數(shù)據(jù)的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06jQuery獲取所有父級元素及同級元素及子元素的方法(推薦)
這篇文章主要介紹了jQuery獲取所有父級元素及同級元素及子元素的方法,本文給大家介紹的非常詳細(xì),具有參考借鑒價值 ,需要的朋友可以參考下2018-01-01jQuery源碼分析之jQuery.fn.each與jQuery.each用法
這篇文章主要介紹了jQuery源碼分析之jQuery.fn.each與jQuery.each用法,較為詳細(xì)的分析了each的用法,非常具有實用價值,需要的朋友可以參考下2015-01-01jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法
本篇文章主要是對jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jquery實現(xiàn)輸入框動態(tài)增減的實例代碼
主要功能是動態(tài)增減輸入框,而且支持對各個輸入框的檢測,每個輸入框在輸入內(nèi)容后,對其進(jìn)行錯誤提示2013-07-07

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