在正文而不是标头中链接 javascript 文件会导致问题吗?

发布于 2024-11-26 12:40:09 字数 383 浏览 1 评论 0原文

这就是我试图做的事情,

<script type="text/javascript" src="resources/application.js"></script>
    <script type="text/javascript" >
       $(document).ready(createHeader()); 
       $(document).ready(scriptSet()); 
    </script>

以避免将两者分开,虽然通常我只在标题内看到脚本链接,但是 document.ready 函数放在那里时似乎不起作用。然而,当放置在身体末端时,一切似乎都工作得很好,那么这会导致任何问题吗?这样可以吗?

this is what im trying to do

<script type="text/javascript" src="resources/application.js"></script>
    <script type="text/javascript" >
       $(document).ready(createHeader()); 
       $(document).ready(scriptSet()); 
    </script>

id like to avoid having to separate the two, and while generally i see script links only inside the header the document.ready functions dont seem to work when put there. However, everything seems to work completely fine when placed at the end of the body, so would this cause any problems or is this fine?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

满栀 2024-12-03 12:40:09

从功能上讲,只要将代码包含在 $(document).ready(function(){ }); 并且 中,它就会出现在之后 jQuery 文件包含,无论它是在 head 还是 body 中都无关$(document).ready 确保在执行任何脚本之前 DOM 已完全加载。

但是,将所有脚本包含和脚本放在正文的底部对于加载性能来说是最佳

这篇文章很好地解释了这一点。

示例:

        <body>

    <!-- MY HTML CODE -->

    <!-- START javascript -->
        <script type="text/javascript" src="/javascript/jquery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin2.js"></script>
        <script type="text/javascript" src="/javascript/some_other_scripts.js"></script>

        <script type="text/javascript" language="JavaScript">
        //<![CDATA[
            $(document).ready(function(){
                // my code
            });
        //]]>
        </script>
    <!-- END javascript -->

        </body>

Functionally, as long as you enclose your code inside a $(document).ready(function(){ }); and it comes after the jQuery file includes, it does not matter if it's in the head or the body. $(document).ready ensures that the DOM is fully loaded before any script is executed.

HOWEVER, putting all of your script includes and scripts at the bottom of the body is best for loading performance.

This article explains it nicely.

Example:

        <body>

    <!-- MY HTML CODE -->

    <!-- START javascript -->
        <script type="text/javascript" src="/javascript/jquery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin2.js"></script>
        <script type="text/javascript" src="/javascript/some_other_scripts.js"></script>

        <script type="text/javascript" language="JavaScript">
        //<![CDATA[
            $(document).ready(function(){
                // my code
            });
        //]]>
        </script>
    <!-- END javascript -->

        </body>
笨死的猪 2024-12-03 12:40:09

在正文中包含脚本标签没有问题。请记住,页面是自上而下解析的,因此必须在使用脚本之前包含脚本。

There is no problem with having script tags in the body. Just remember that the page is parsed top-down, so scripts have to be included before they are used.

苦行僧 2024-12-03 12:40:09

您确实意识到您放入 $(document).ready() 中的函数不会等待 DOMContentLoaded 触发吗?您必须将它们包装在函数调用(事件处理程序)中,以避免它们出现在代码中时立即调用它们。匿名函数通常就可以了。

$(document).ready(function(){
    createHeader();
    scriptSet();
});

You do realize that the functions you have put inside $(document).ready() are not going to wait for DOMContentLoaded to fire? You have to wrap them inside a function call (event handler) in order to avoid calling them instantly when they show up in the code. An anonymous function is usually just fine.

$(document).ready(function(){
    createHeader();
    scriptSet();
});
素染倾城色 2024-12-03 12:40:09

我已经部署了许多 Web 应用程序,并且从未遇到过脚本位于 body 标记中的问题。我喜欢将其放置在页面末尾,以免妨碍页面上可见元素的下载进度。我相信谷歌也用他们的一些脚本(也许是 Analytics?)做到了这一点。

就像其他一些人所说的那样,请确保在 $(document).ready(); 之前有 jQuery 引用。称呼。很容易被忽视,但很难排除故障:)

JMax

I have deployed a number of web applications, and haven't ever had a problem with the script being in the body tag. I like to place it at the end of the page so as not to impede download progress of the visible elements on the page. I believe that Google has also done this with some of their scripts (maybe Analytics?).

Like some of the others have said, make sure that you have your jQuery reference before the $(document).ready(); call. It's easy to slip past, and hard to troubleshoot :)

JMax

生生漫 2024-12-03 12:40:09

不,事实上,将脚本放在 HTML 的末尾对于“性能”是有好处的。

仍然一个好的做法是将所有 javascript 放在另一个文件中,然后设置一个调用它的标头,如果可能的话甚至压缩该文件。

现在,我将为此更改该代码,

$(document).ready(function(){
    createHeader();
    scriptSet();
}); 

这样您就不会调用 $(document).ready 两次:)

Nop, in fact its good for "performance" to put your scripts at the end of your HTML.

Still a good practice is to have all your javascript in another file and just set a header calling it, if posible even compressing the file.

Now, I would change that code for this

$(document).ready(function(){
    createHeader();
    scriptSet();
}); 

so you dont call $(document).ready twice :)

べ映画 2024-12-03 12:40:09

如果您将脚本包含和块放入 BODY 元素中,通常并不重要;在大多数情况下它们都会运行得很好。有些人认为这是一种不好的做法,但这并不是错误的做法。这种事经常发生。

不过,我想指出的是,只要在 jQuery include 之后,将 $.ready() 函数调用放在哪里并不重要,因为它总是在 DOM 之后运行已准备就绪(这将在页面加载后发生)。所以,在这种情况下,这没有任何区别。

注意函数调用中的匿名函数。这将为匿名函数传递对 $.ready() 的引用,这允许稍后执行其函数体,因此您的函数将在稍后调用。

<script type="text/javascript">
$(document).ready(function(){
    createHeader(); 
    scriptSet();
}); 
</script>

It typically does not matter if you put your script includes and blocks within your BODY element; they'll run perfectly fine in most cases. Some people believe it a bad practice, but it's not a wrong practice. It happens all the time.

However, I'd like to point out that it will not matter where you put a $.ready() function call, as long as it's after the jQuery include, as it will always run AFTER the DOM is ready (which will occur AFTER page load). So, in this case it doesn't make any difference.

Note the anonymous function in the function call. This passes a reference to $.ready() for the anonymous function, which allows it's function body to be executed at a later time, hence your functions will be called at a later time.

<script type="text/javascript">
$(document).ready(function(){
    createHeader(); 
    scriptSet();
}); 
</script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文