文档就绪功能 - 不先加载代码答案

【问题标题】：Document ready function - Not loading the code first文档就绪功能 - 不先加载代码
【发布时间】：2016-06-24 04:14:33
【问题描述】：

我有一个可以在主体 onload="" 上运行的函数，但我需要在页面的其他元素之前加载它，并且我正在尝试在标题中添加文档就绪函数，但它似乎不起作用.

f1menu() {
    $('.menuH').hover(
        function() {
            $('.menuC').stop().animate({width: '90px'},333)
        }, 
        function() {
            $('.menuC').stop().animate({width: '-0'}, 333)
        }
    );
}

$(document).ready(function() {
    f1menu();
});

所以onload 起作用的函数就是下面这个：

onload="$('.menuH').hover(function() {$('.menuC').stop().animate({width: '90px'}, 333)}, function() {$('.menuC').stop().animate({width: '-0'}, 333)});"

【问题讨论】：

请发布您的代码，以便正确格式化/缩进以提高可读性和更容易排除故障。已编辑。
值得一提的是$(document).ready
那么我如何先加载它呢？我认为这是文档准备好与 window.load 的目的
不，这不是准备文件的目的。如果您只想让您的代码在其他任何事情之前运行，只需在没有事件处理程序的脚本标签中执行它，但此时您将无法访问任何 DOM 元素。
另外，你确定目标元素在页面加载时退出页面并且实际上在一段时间后没有添加，这很重要

标签： javascript jquery onload domready

【解决方案1】：

请注意，在 OP 更改问题之前提供了以下答案。

你应该写：

  function f1menu(){}

不是，

  f1menu(){}

此外，您可以通过简单地将您希望在文档准备好时调用的函数直接传递给 jQuery 来简化您的 document.ready 代码：

$(function() {
     $('.menuH').hover(
         function() {
            $('.menuC').stop().animate({width: '90px'}, 333);
         }, 
         function() {
            $('.menuC').stop().animate({width: '-0'}, 333);
         }
     );
});

更新：

在 OP 修改问题后，解决方案（顺便说一下，不是推荐的方法）是将脚本插入页面主体，但在函数引用的任何元素之后，例如：

 <body>

     <!-- elements that the code references must come before the code -->
     <script>
        // .menuH and .menuC elements must have already been loaded into DOM
        $('.menuH').hover(
           function() {
               $('.menuC').stop().animate({width: '90px'},333)
           }, 
           function() {
               $('.menuC').stop().animate({width: '-0'}, 333)
           }
        );
     </script>

     <!-- Rest of HTML -->
 </body>

【讨论】：

解释“不起作用”。你有错误吗？是否在 f1menu 中添加了 console.log 以查看是否被调用？
不起作用，因为在页面通过 onload 事件完成后仍然会被加载，而不是文档准备好
你是如何做出这个决定的？ load 事件和文档准备好（实际上是 DOMContentLoaded 事件）之间的唯一区别是 load 会一直等到所有页面资源都已完全加载，并且在 DOM 树构建后立即触发 ready。确保您在清除浏览器缓存的情况下尝试此代码。
当我加载页面时，当我将鼠标悬停在它上面时，菜单不会动画，直到整个页面加载完成。我还尝试将代码直接复制粘贴到准备好的文档中，这也不起作用，而不是创建一个函数并调用它。
OP 似乎不明白 $(document).ready 是如何工作的。 在整个 DOM 加载后它将运行包含的代码，这就是它的目的

【解决方案2】：

它不知道f1menu 是一个函数，因为你没有将它声明为一个函数。试试这个：

function f1menu(){ //logic }

【讨论】：