javascript - CSS/Javascript 加载太晚

Question

我正在使用一个名为 dropotron 的脚本，它通过制作列表创建了一个漂亮的下拉菜单。

例如。

<ul class="menu">
<li>home</li>
<li>Categories
   <ul><li>foo</li><li>moo</li><li>too</li></ul>
</li>
</ul>

等等

我的问题是，当我加载一个页面时，列表需要几秒钟的时间才能变成菜单，它应该看起来对访问者来说是不好的。

我的相关代码包括js、css等是:

<script type="text/javascript">
$(function() {
    $('#menu > ul').dropotron({
        mode: 'fade',
        globalOffsetY: 11,
        offsetY: -15
    });

});
</script>

关于我如何加快速度或完全不发生的任何建议？

谢谢。

Answer 1

只需避免等到 DOM 准备好应用您的插件。只需将插件的初始化过程放在主体中列表的 HTML 之后即可。这应该会加快速度。

<ul id="#my-menu" class="menu">
    <li>home</li>
    <li>Categories
    <ul><li>foo</li><li>moo</li><li>too</li></ul>
    </li>
</ul>

<script>
<!-- I changed the selector to target the element directly, but you can play with this. -->
$('#my-menu').dropotron({
    mode: 'fade',
    globalOffsetY: 11,
    offsetY: -15
});
</script>

您也可以尝试使用内联样式最初隐藏列表，并在正确应用插件后显示它，但这不一定会带来更好的用户体验。

注意:不要忘记最小化您的 JavaScript 文件和 CSS 文件。