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文件。

Answer 2

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

Answer 3

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

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

希望这有效！

Answer 4

试

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

});
});

</script>

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

CSS / Javascript加载太晚了

4 个答案: