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

标签 jquery css mobile responsive-design

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

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

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

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

如有任何建议,我们将不胜感激

最佳答案

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

jQuery UI 可以大到 100k,并且取决于 jQuery,这是另一个 80k。

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

您有几个选择。

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

关于jquery - 响应式网站在页面加载之前不显示菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16544742/

相关文章:

javascript - 将 javascript mousedown/mouseup/mousemove/keypress 监听器移植到移动设备时应该注意什么?

用于更改移动显示的 css 值的 Javascript

javascript - 文本字段到隐藏字段值 - 未设置值

javascript - 从ajax接收多个变量并使用php将其写入文本文件

javascript - 将特定的 csv 文件读入 html

javascript - 移动 safari 对大图像进行降采样。如何挽留?

html - 无法获得标签和输入以专注于工作

html - 选择标签的 OPTIONS 右对齐

php - 单击按钮提交输入字段值

javascript - Android 键盘在表单提交后不隐藏