jquery - 显示 :none show on load 的元素

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

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