Question

我刚刚使用Javascript创建了加载屏幕，并且想知道必须将其放置在HTML文档的哪一部分。我的意思是在关闭标签内部或之前？一些文档说必须放置它，因为它必须在任何内容之前被加载，但是即使我把它放在前面，它似乎也能很好地工作。

您能告诉我“必须”或“更好”放置脚本的HTML文档的哪一部分？ “延期”或“不延期”是否有所不同？

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>

Answer 1

文档（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script）谈论defer属性：

此布尔属性设置为向浏览器指示该脚本   是指在文档解析后但在   触发DOMContentLoaded。

具有defer属性的脚本将阻止DOMContentLoaded   从触发到脚本加载完毕并完成评估为止的事件。

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

但是无论如何，与脚本标记的放置位置无关，脚本将在触发load事件之前执行，因此每个放置位置都适合脚本，这会将事件侦听器添加到脚本中load事件。

明智地，我将它们放置在头部，因为这样更干净，尤其是如果您的身体部分内容很多。

Answer 2

您可以使用document.readyState API来了解文档何时完全加载。

您可以参考此答案以获取更多见识。

https://stackoverflow.com/a/44715040/7181668

我应该将JavaScript的加载屏幕脚本放在HTML文档的哪里？

2 个答案: