jquery - 带显示的元素：加载时不显示

Question

对于跨浏览器的确定性等，我使用了两个菜单，一个用于桌面，一个用于移动。通过媒体查询，我会显示一个并隐藏另一个。我的问题是，当我 ctrl + f5 或导航到移动版本的另一个页面时，桌面菜单会在加载时显示几秒钟。有任何想法吗？

Answer 1

这就是所谓的FOUC（无样式内容的闪存），它的常见原因是 javascript 在页面加载时运行。浏览器会在显示页面之前暂停显示页面几秒钟（或十分之一秒）。通过webpagetest.org和zoompf.com运行您的网站，以识别导致页面加载速度变慢的问题。

为了在短期内为您提供帮助，请在生成页面时为元素添加样式属性，并动态设置值，例如对于 PHP：

<div id="desktop-menu" style="display:<?php echo $mobile ? 'none' : 'block'; ?>">

编辑：我刚刚注意到您已用jquery. 大概然后你用这样的代码隐藏元素：

$(function(){$('desktop-menu').toggle();});

当您的网络浏览器完成加载页面时运行。在这种情况下，最好的做法是将 CSSdiaply:none作为style属性内联，然后简单地转储 jQuery 调用。

Answer 2

你肯定需要2个菜单吗？

我在 TrulyCode.com 上认识自己，我有 1 个菜单，但通过媒体查询对其进行不同的样式设置，它从基本菜单栏变为移动设备的屏幕外边栏。

在您尝试为您的 2 菜单方式找到解决方案之前，请查看您是否可以获得适合所有样式的 1 菜单，因为它有助于 SEO、页面速度，并且通常更加一致。

正如 Nicholas 所提到的，它只是一闪而过的无样式内容，浏览器获得了该项目的 HTML，但不是所有相关的 CSS 或 JS。

虽然，我不会像 Nicholas 建议的display:none内联那样做，好像 JS 没有加载/被阻止/禁用，那么您的用户将根本没有菜单！