快捷導(dǎo)航

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也遇到了同樣的問題，在其的評論下方有一種解決方案，可以參考：

在要獲取圖片寬高的地方用

復(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-06
jQuery操作之效果詳解
jQuery效果操作一共分五類：1.基本，2.滑動，3.淡入淡出，4.自定義，5.設(shè)置。本文將對此詳細(xì)介紹。具有很好的參考價值。下面跟著小編一起來看下吧
2017-05-05
jquery實現(xiàn)圖片輪播和滑動效果
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)圖片輪播和滑動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
jQuery獲取所有父級元素及同級元素及子元素的方法(推薦)
這篇文章主要介紹了jQuery獲取所有父級元素及同級元素及子元素的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價值 ,需要的朋友可以參考下
2018-01-01
jQuery源碼分析之jQuery.fn.each與jQuery.each用法
這篇文章主要介紹了jQuery源碼分析之jQuery.fn.each與jQuery.each用法,較為詳細(xì)的分析了each的用法,非常具有實用價值,需要的朋友可以參考下
2015-01-01
jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法
本篇文章主要是對jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jquery實現(xiàn)輸入框動態(tài)增減的實例代碼
主要功能是動態(tài)增減輸入框，而且支持對各個輸入框的檢測，每個輸入框在輸入內(nèi)容后，對其進(jìn)行錯誤提示
2013-07-07
這篇文章主要介紹了jquery實現(xiàn)簡單實用的打分程序,涉及jquery節(jié)點遍歷與樣式操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07