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

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（）函数中要更改的大小（将整个代码粘贴到此处会很好。）。 元素大小的任何更改都可能影响所有其他元素。