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

标签 javascript

我刚刚用 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/

相关文章:

javascript - 将作用域传递给 forEach

javascript - 手动添加到 HTML 范围输入会产生意外结果

javascript - 在没有引荐来源网址的情况下,Google、Facebook 等如何找出您来自哪个网站?

javascript - 如何从 MERN 技术栈中的数据库中检索最后添加的记录?

javascript - 如何将数组参数添加到对象的构造函数,从而为每个对象提供自己的数组?

javascript - 在不刷新查询页面的情况下加载某个 div

javascript - 如何在 javascript 中将字节格式化为人类可读的文本?

javascript - 未捕获的ReferenceError : app is not defined in controller,模块和路由

javascript - 我在哪里获取 navigator.connection 每种有效类型的吞吐量或下行链路信息

javascript - Javascript 中用于占位符的正则表达式