css - 如何在页面加载时关闭移动导航菜单？

Question

我有一个基于 Joomla 2.5 的响应式网站和一个带有移动导航菜单的 Joomla51 模板，用于平板电脑和手机。

打开网页时，手机菜单会保持打开状态很长时间，直到页面渲染过程完成。相反，我希望在页面呈现期间关闭移动菜单:

http://quirktools.com/screenfly/#u=http%3A//www.golfanatics.de/&w=320&h=480&a=33&s=1

我能做什么？

Answer 1

我现在看到的是，您的模板头部有一个 Google 字体文件(见下文)，这给了我一个 400 错误。

我会先解决这个问题，因为它可能会延迟您的 css 文件启动和折叠移动菜单

祝你好运!

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arial"/>

编辑

很高兴您能够修复字体文件 400 错误。

尽早尝试折叠菜单栏的建议可能会有所帮助，尽管您的 CSS 和 JS 设置比较复杂，而且我很难看出如何在实践中做到这一点。

我还可以看到我首先要解决的其他一些问题。

类似 YSlow 的工具或者我最喜欢的WebPageTest非常擅长帮助查明问题可能出在哪里。如果我在 WebPageTest 上查看您的网站对我来说很突出的一件事是主页的重量将近 5MB，已经上升了。

您可以减少的越多，页面加载速度就越快，而且它有助于解决菜单问题。

我要解决的第一件事是一些图像的大小。我可以看到由于某种原因加载了许多大图像，例如http://www.golfhouse.de/img/produktbilder/xxl/52418099-01-GHIE.jpg

也许你可以缩小这些尺寸。

接下来你想尝试同时最小化和压缩 css、js 和图像文件。理想情况下，您还可以将所有 CSS 文件合并到一个文件中，对于 JS 脚本也是如此。类似 JCH Optimize 的选项让这变得简单。

您还可以考虑使用像 CloudFlare 这样的 CDN ，这既可以加快您的网站速度，又可以减少服务器的负载。

我希望以上各项的综合效果可以帮助您的主页加载速度至少提高一倍，可能更快。

希望这对您有所帮助!