為什么頁面加載時我的元素大小不正確？

Question

如果窗口中沒有足夠的空間，我試圖隱藏導航。 導航包含在包裝中，包裝也包含徽標，因此要計算是否有足夠的空間，請使用以下命令：

if ($(window).width() < ($('#logo').outerWidth() + $('#nav').outerWidth())) 
    $('#nav').hide();

當文檔准備好並調整窗口大小時，我可以運行該文件。 我注意到的是，如果窗口開始時過小，則不會隱藏導航，因此我進一步對其進行了調查。 我發現文檔准備就緒時正在計算的導航寬度不正確。

導航由

並且它們都被計算為太小約3-4px，但是在調整窗口大小時，可以正確計算值。 有誰知道為什么會這樣嗎？

Answer 1

調用該函數時，可能是某些圖像尚未完全加載。 嘗試將事件綁定到；

$(window).load();

代替;

$(document).ready();

這將使函數在頁面完全完成加載后運行，包括圖像，而$（document）.ready（）僅等待DOM加載。

$(window).load(function () {
    if ($(window).width() < ($('#logo').outerWidth() + $('#nav').outerWidth()))
        $('#nav').hide();
});

正如Terry所指出的那樣 ，在資源非常密集的網站上，這將導致隱藏導航欄之前的大量延遲，這可能是一個問題，因此您可以改為查看#nav或#logo元素的負載狀態。

$('#nav').load(function () {
    if ($(window).width() < ($('#logo').outerWidth() + $('#nav').outerWidth()))
        $('#nav').hide();
});

Answer 2

該問題通常來自以下事實：當您調用代碼行時，瀏覽器仍在計算元素的大小。 嘗試留意$（document）.ready（）函數中要更改的大小（將整個代碼粘貼到此處會很好。）。 元素大小的任何更改都可能影響所有其他元素。