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

Question

我正在制作一个响应式网站，目的是让它更适合平板电脑(ipad 纵向和波纹管)和移动设备的“App Like”。使用 CSS 媒体查询这(过去)进展顺利。

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

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

我知道答案是使用 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。