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

Question

如果窗口中没有足够的空间，我会尝试隐藏导航。导航包含在一个包装器中，该包装器还包含一个 Logo ，因此为了计算是否有足够的空间，我使用以下方法:

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

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

导航由

组成，它们都被计算为大约 3-4px 太小了，但是当调整窗口大小时，值得到正确计算。有谁知道为什么会这样？

Answer 1

可能是调用函数时有些图片还没有完全加载。尝试将事件绑定(bind)到；

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