Javascript 文档准备功能-不首先加载代码_Javascript_Jquery_Onload_Domready

Javascript 文档准备功能-不首先加载代码

javascript jquery

Javascript 文档准备功能-不首先加载代码,javascript,jquery,onload,domready,Javascript,Jquery,Onload,Domready,我有一个函数可以在bodyonload=”“上运行，但我需要在页面的其他元素之前加载它，我试图在页眉中添加document ready函数，但它似乎不起作用 f1menu() { $('.menuH').hover( function() { $('.menuC').stop().animate({width: '90px'},333) }, function() { $('.menuC')

我有一个函数可以在body

onload=”“

上运行，但我需要在页面的其他元素之前加载它，我试图在页眉中添加document ready函数，但它似乎不起作用

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)});"

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

你应该写：

  function 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>


//.menuH和.menuC元素必须已加载到DOM中
$（'.menuH'）。悬停(
函数（）{
$（'.menuC'）.stop（）.animate（{width:'90px'}，333）
}, 
函数（）{
$（'.menuC'）.stop（）.animate（{width:'-0'}，333）
}
);

它不知道

f1菜单

是一个函数，因为您没有将它声明为一个函数。试试这个：

功能菜单（）{
//逻辑

}

解释“不起作用”。你有错误吗？您是否已将console.log添加到F1菜单中以查看是否正在调用它？不起作用，因为在onload事件而不是document Ready完成页面后，它仍然会被加载。您是如何确定的？load事件和document ready（实际上是DOMContentLoaded事件）之间的唯一区别是load等待所有页面资源完全加载，并且ready在构建DOM树之后立即启动。请确保在清除浏览器缓存的情况下尝试此代码。当我加载页面时，当我将鼠标悬停在该页面上时，菜单不会显示动画，直到整个页面加载完毕。我还尝试将代码直接复制粘贴到document ready中，这也不起作用，而是创建一个函数并调用它。OP似乎不理解$（document）.ready是如何工作的。它将在加载整个DOM后运行所包含的代码。这就是它的目的。请发布您的代码，使其具有正确的格式/缩进，以便于可读性和故障排除。已编辑。值得一提的是，$（文档）。准备好了吗？我如何在加载之前加载它？我认为这是document ready vs window.Load的目的不，这不是document ready的目的。如果您只是想让代码先运行，只需在脚本标记中执行它，而不使用事件处理程序，但此时您将无法访问任何DOM元素。此外，您是否确定目标元素在页面加载时存在于页面上，并且在加载后一段时间实际上没有添加，这非常重要

 <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>