CSS/Javascript 加载太晚了

CSS/Javascript loading too late

本文关键字：加载 Javascript CSS      更新时间：2023-09-26

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

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

谢谢。

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

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

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

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

希望这有效！

试试

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

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

相关文章：