0

我正在使用一个名为 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>

关于如何加快速度或让它根本不发生的任何建议？

谢谢你。

4

4 回答 4

2

只需避免等到 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 文件。

于 2013-10-31T12:02:00.193 回答
1

加载 html 后，您似乎加载了 dropotron.js 脚本。为了确保在加载 html 时 javascript 准备就绪，您可以将您的内容<script src="../dropotron.js"></script>放入<head>页面的一部分。这样，dropotron.js 将在任何 html 被解析和渲染之前被加载。

于 2013-10-31T12:04:01.620 回答
0

尝试使用 window.onload 全局事件处理程序。

function load () {
 ......
}
window.onload = load;

希望这有效！

于 2018-02-01T20:37:09.093 回答
-2

尝试

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

});
});

</script>

以确保在运行函数之前完全加载您的文档...

于 2013-10-31T11:59:33.447 回答