为什么 jquery Mega Menu 加载这么慢？

Question

我正在使用 jquery Mega menu，当我的页面加载时，它首先在渲染时显示所有菜单（包括子菜单），然后子菜单消失，看起来像一个普通的水平人。它最终加载并看起来正确，但它非常分散注意力并且看起来有点奇怪。我可以在上面的示例页面上复制它。

它几乎就像它试图在渲染后立即隐藏菜单一样

有谁知道是否有办法让这个菜单加载“更干净”，而无需这种跳跃的增量渲染？

Answer 1

如果您使用 $.ready() 包装器来调用初始化程序，它将等到整个页面完全加载后才准备好菜单。你有两个选择：

1. 在初始化之前使用 CSS 隐藏菜单。

2. 在标记后立即初始化菜单。

这是一个例子：

<ul id="menu">
    <li>...</li>
    ... giant menu ...
</ul>
<script type="text/javascript">
    $('#menu').giantMenu();
</script>

编辑：更多...

真正的理想是禁用 javascript 并查看页面的外观。你不应该依赖 javascript 来让你的页面看起来很正常。这可能就像添加一些 Mega Menu 在初始化期间添加的类一样简单。

Answer 2

这称为FOUC，如果您首先通过 css 正确设置菜单样式，则可以避免这种情况。这样浏览器加载所有必要的 .js 文件需要一段时间就没有问题了。