CSS/Javascript 加载太晚答案

【问题标题】：CSS/Javascript loading too lateCSS/Javascript 加载太晚
【发布时间】：2018-02-02 04:37:09
【问题描述】：

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

有什么建议可以加快速度，或者根本不让它发生吗？

谢谢。

【问题讨论】：

takes a few seconds0_o。潜在的蠕虫罐头。谁想开始？
@IanBrindley 是对的。这缺少很多上下文。那，或者你正在运行 56k 拨号。
在你的css文件中添加#menu { display: none; }，在你的脚本中，在dropotron()调用之后，添加$("#menu").show();
This may help you, how to speed up 但您可以将ul 隐藏并加载，您可以显示并应用方法。
制作一个 jsfiddle 示例向我们展示实际存在的问题，也许我们可以提供帮助。

标签： javascript jquery css menu

【解决方案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 文件。

【讨论】：

$(document).ready() 在解析 DOM 后立即触发，它不是 load，如果您在解析 DOM 之前运行任何 js 代码，那么它将无法工作。跨度>
@RCV，你不必等到 DOM 被完全解析后再操作它。
如果ul 不在DOM 中，那么$('#menu > ul') 将抛出错误，但您可以将脚本放在页脚中以确保元素已加载，但这不是案例在这里，IMO。
@RCV，我不确定您在我提供的示例中不理解什么。代表列表的 HTML，然后脚本紧随其后。因此该元素将存在于 DOM 中并且可以被操作。
你在哪里提到脚本应该放在list 之后？基本上它停留在标题中，您是在告诉在正文中使用<script> 标签还是在哪里？

【解决方案2】：

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

【讨论】：

你是怎么得出这个结论的，还是只是猜测？
这是基于“需要几秒钟”的说法的猜测。

【解决方案3】：

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

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

希望这行得通！

【讨论】：

您能否添加一些解释，为什么这个答案有效以及 OP 做错了什么。
当我尝试使用 jquery 使父 div 的高度等于其子图像高度时，我遇到了同样的问题。但是有大量不同大小的图像。当我在本地运行我的应用程序时，一切都很好，但是在主机上出现了一个错误，jquery 无法更改 div 的高度与它的孩子的高度相对应，我认为当浏览器尝试渲染图像时，首先加载了 jquery。然后，我添加 $(document).ready() 方法。它也无济于事，因为它是 JQuery。回答你的问题是，因为它只是 JS 和其他人使用 jquery 做错了。
但是在 load 函数中你可以在 jquery 中编写你的代码。有用！但我不推荐

【解决方案4】：

试试

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

});
});

</script>

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

【讨论】：

他已经有一个文档就绪处理程序。 $(function() { }) 是一个文档就绪处理程序。您刚刚建议用另一个包装它。
$( document ).ready()和$(function() {})是一样的，见：learn.jquery.com/using-jquery-core/document-ready