带显示的元素：无显示负载

对于跨浏览器的确定性等我用了两个菜单，一个用于桌面和一个用于移动。随着媒体查询，我显示一个，并隐藏另一个。我的问题是，当我按Ctrl + F5或导航到移动版本的另一个页面时，桌面菜单在加载时显示几秒钟。有任何想法吗？带显示的元素：无显示负载

来源

2013-07-15 Dale

听起来像一个JavaScript的东西，你可以请张贴一些代码？另外，你如何在移动设备上按ctrl + f5 ...？ – David

@David他的意思是通过任何可用的机制'刷新页面'，但有些平板电脑确实有USB端口，所以如果您插入键盘，可以按Control-F5！ –

隐藏你的一般CSS的两个菜单，并显示正确的使用媒体查询/ js – Huangism

这就是所谓的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调用。

来源

2013-07-15 12:31:36

感谢很多人，一个问题，即时通讯不太确定如何使用jQuery打开或关闭菜单？以供参考：http://memre.loudcrowd.co.za – Dale

请参阅http://api.jquery.com/category/effects/basics/请注意，您的菜单包装在我的浏览器（Windows上的Chrome，大量的屏幕空间）：http://web.nickshanks.com/stackoverflow/17654251/memre.png –

你确实需要有2个菜单吗？

我知道自己在TrulyCode.com我有1个菜单，但随后通过媒体查询不同风格它，它会从一个基本的菜单栏，到屏幕外侧栏移动。

之前你去试图找到你的2个菜单方式的解决方案，看看你是否能拿到1个菜单适合所有的风格，因为它会与搜索引擎优化，速度帮助，只是一般更一致。

正如谢霆锋所说，这只是一个无样式内容闪烁，浏览器已经得到了该项目的HTML，但不是所有的相关的CSS，JS或。

虽然，我不会像尼古拉斯用display:none内嵌建议的那样去做，就好像JS尚未加载/被阻止/禁用那么您的用户将根本没有菜单！

来源

2013-07-15 12:46:56

非常感谢很多人。嗯，我已经看了几个动态缩小的响应菜单，然后形成响应菜单，但大多数他们不工作在IE 7中。所以我基本上做的是隐藏桌面版本显示：无和响应导航显示：块 – Dale

你必须支持IE7？我为你感到难过！ –

是的，它很痛苦。 – Dale

带显示的元素：无显示负载

回答

相关问题