响应式网站在页面加载之前不显示菜单

Question

我正在制作一个响应式网站，目的是使其在平板电脑（ipad 纵向和波纹管）和移动设备上更加“类似应用”。这（曾经）使用 CSS 媒体查询进展顺利。

问题是页面加载。用户可以搜索产品。但是响应式菜单和其他 Accordian 选项卡在页面完全加载之前无法工作。响应式菜单是http://www.meanthemes.com/plugins/meanmenu/，而 Accordian 就是 Jquery。不工作是指响应式菜单根本没有显示，并且手风琴选项卡一直保持打开状态，直到页面完全加载。

我已经在页面上隐藏了从桌面数据库填充的其他菜单....并尝试完全删除代码......这确实加快了速度，但仍然是同样的问题。

我知道答案是使用 jquery mobile 之类的东西（我建议）然后重新开始....但是客户希望网站能够响应

任何建议将不胜感激

Answer 1

Accordion 和其他菜单元素是可视组件，在执行它们的 JavaScript 之前不会初始化。

jQuery UI 可以大到 100k，并且依赖于另一个 80k 的 jQuery。

标准做法是在 $(document).ready() 回调中执行 jQuery 代码，但在移动设备上可能需要一段时间才能被触发。由于通过无线下载页面时存在延迟时间。

你有几个选择。

• 通过仅使用您需要的功能构建 JS 来减小 jQuery UI 的大小。
• 将<script> 包含标签从页面底部移动到页眉。通常建议将脚本放在底部，因为它们会阻止下载直到完成。但如果菜单与页面一起显示很重要，您可能必须将它们移动到标题。
• 您不必总是将 JavaScript 代码放在 $(document).ready() 中。如果您知道 Javascript 位于您需要的 DOM 元素下方，那么这些元素已经准备好并可以转换为 Accordion，但 jQuery 必须已经加载。