当页面加载时，为什么我的元素的大小不正确？

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();
});

As Terry pointed out，在资源非常繁重的网站上，这会导致隐藏导航栏之前的大延迟，这可能是个问题，因此您可以检查#nav或#logo元素的负载状态。

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

Answer 2

问题通常来自于当您调用代码行时浏览器仍在计算元素的大小。 尝试密切关注你在$（document）.ready（）函数中改变的大小（在这里粘贴整个代码本来不错......）。对元素大小的任何更改都可能会影响所有其他元素。