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

Question

如果窗口没有足够的空间，我想找个导航来隐藏。导航包含在还包含徽标的包装中，因此，为了计算是否有足够的空间，我使用以下方法：

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

在文档准备就绪和窗口大小调整时，我将运行该操作。我注意到的是，如果窗户开始太小，它没有隐藏导航，所以我进一步查看了它。我发现当文档准备就绪时，正在计算的导航宽度是不正确的。

导航系统由以下部分组成

• 而且它们都是计算出来的大约3-4 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()函数中注意您正在更改的大小(最好将整个代码粘贴在这里.)。元素大小的任何更改都可能影响所有其他元素。