个人中心
gpt4 book ai didi

javascript - 我应该将 JavaScript 的加载屏幕脚本放在 HTML 文档上的什么位置？

转载 作者：行者123 更新时间：2023-12-01 01:05:33 26 4
gpt4 key购买 nike

我刚刚用 Javascript 制作了加载屏幕，我想知道它必须放置在 HTML 文档的哪一部分。我的意思是在关闭标签内部或之前？？？有些文档说它必须放在 on 上，因为它必须在任何内容之前加载，但即使我把它放在前面，它似乎也运行良好。

您能告诉我“必须”或“最好”放置 HTML 文档的哪一部分脚本吗？“defer”和“no defer”的大小写有区别吗？

window.addEventListener('load', function () {
    document.querySelector('#js-loading').classList.add('hide');
});
.loading {
    opacity: 1;
    transition-property: visibility, opacity;
    transition-duration: 0.2s; 
}
.loading.hide {
    visibility: hidden;
    opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/script.js"></script> //Position A ???
        <script src="js/script.js" defer></script> //Position A with defer???
    </head>
    <body>
        <div class="loading" id="js-loading">
            <div class="loading-img"><img src="images/loading.svg" alt=""></div>
        </div>
        <div>content</div>
        <script src="js/script.js"></script> //Position B ???
        <script src="js/script.js" defer></script> //Position B with defer???
    </body>
</html>

最佳答案

文档 ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script ) 介绍了 defer 属性:

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

如果没有 defer 属性，脚本将立即加载。

但在任何情况下，无论脚本标记位置如何，脚本都会在 load 事件触发之前执行，因此每个位置都适合添加事件的脚本load 事件的监听器。

就热情而言，我会将它们放在头部，因为这样更干净，特别是当 body 部分有很多内容时。

关于javascript - 我应该将 JavaScript 的加载屏幕脚本放在 HTML 文档上的什么位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55675271/

26 4 0
文章推荐： design-patterns - 实时 Web 应用程序的架构
文章推荐： jquery - 你如何知道 jQuery 函数何时返回 false？
文章推荐： azure - 使用 Azure 自动缩放时，我是否需要在 web.config 中指定 MachineKey？
文章推荐： jQuery - 滚动时淡出/淡入于 "scrollstop"