jQuery寬度（）在加載時不正確

當我加載我的頁面並使用$('div.logo').width()時，它返回一個海量值6500，這是不正確的。圖像只有130像素寬。jQuery寬度（）在加載時不正確

但是，如果我使用setTimeout並在幾秒鐘後檢查$('div.logo').width()它將返回正確的寬度。

這是爲什麼？我的所有CSS應該已經加載了，那麼爲什麼第二次暫停會有所作爲？

它的原因是當你的代碼運行時，圖像沒有加載。 – Shail

你什麼時候使用'$（'。logo img'）。width（）'檢查寬度？檢查時可能無法加載圖像。 –

您必須檢查圖像加載後的圖像寬度。

因此，要麼：

// NOTE: not $(document).ready 
$(window).load(function() { 
    var width = $('.logo img').width(); 
});

或者

$('.logo img').load(function() { 
    var width = $(this).width(); 
});

應該給予正確的寬度。

2014-06-13 08:29:29 xdazz

不，這不是問題。它發生在$（'。logo'）。width（）'。 –

@NicHubbard你的'.logo'包含圖像，對吧？ – xdazz

'.logo'是一個內部有圖像的div。 –

這是因爲圖像尚未加載，所以初始大小基於CSS或猜測。您可以使用：

$('.logo img').load(function() { 
    var width = $(this).width(); 
});

2014-06-13 08:28:08 hsz

圖片是越來越裝有GET方法，所以你需要後檢查，

$('.logo img').load(function(){ 
    //your code 
});

如果你想你的形象被載入即刻就可以使用Base64圖像去。更多詳細信息Plase see here

2014-06-13 08:32:28 Jaykishan

將width和height屬性設置爲圖像。你也可以在CSS中指定大小。然後瀏覽器會知道在加載之前圖像的大小。

2014-06-13 08:35:23 ndcweb

'.width（）'將得到計算寬度，而不是屬性寬度：http://api.jquery.com/width/ – mikedidthis

@mikedidthis如果設置了'img'標記的'width'屬性，那麼它就是實際上'img'在瀏覽器顯示時會有'width'，所以它是計算的寬度。設置圖像的「寬度」和「高度」也是很好的做法，以便瀏覽器在加載圖像之前知道它。 –

@ t.niese確實如此，但是如果OP CSS設置了'max-width：100％'，那麼這個值是不正確的。 – mikedidthis

它可以是JavaScript修改頁面的佈局，例如它可以是包含在頁面底部的腳本標記，或者任何其他在JQuery就緒或加載事件上執行的JavaScript代碼。例如，如果此代碼附加html代碼，它可能會影響你的.logo div的寬度。

另一種可能性是，你的html不正確，檢查這個只需運行任何HTML驗證器，如http://www.freeformatter.com/html-validator.html。當從你的頁面中提取HTML進行驗證時，請注意一些瀏覽器修復了不正確的HTML，所以最好從源代碼中獲取它。

2014-06-13 09:07:06 snautz

回答