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

Question

我正在建立一个响应的网站，旨在使平板电脑（ipad肖像和波纹管）和移动设备更像“App Like”。使用CSS媒体查询这是很好的。

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

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

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

任何建议都将不胜感激

Answer 1

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

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

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

你有几个选择。

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