我应该将JavaScript的加载屏幕脚本放在HTML文档的哪里？
[英]Where should I put JavaScript's loading screen script on HTML Document?
问题描述
I just made loading screen with Javascript and am wondering which part of HTML Document it must be placed. 
我刚刚使用Javascript制作了加载屏幕，并且想知道它必须放在HTML文档的哪一部分。 I mean on inside of or before closing tag??? 我的意思是在关闭标签内部或之前？ Some documents say it must be placed on because it has to be loaded before any contents, but it seems to work well even though I put it before . 一些文档说必须放置它，因为它必须在任何内容之前被加载，但是即使我把它放在前面也似乎工作良好。
Could you tell me which part of HTML Document I "must" or "had better" put the scripts? 您能否告诉我“必须”或“更好”放置脚本的HTML文档的哪一部分？ Is there difference in case with "defer" or "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>
2 个解决方案
解决方案1
1 已采纳 2019-04-14 12:42:12
The docs ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script ) are saying about the defer attribute: docs（ 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.
Without the defer attribute, the scripts would be loaded immediately. 没有defer属性，脚本将立即加载。
But in any case and independent of the script tag placement, the scripts will be executed before the load event is fired, so every placement is fine for a script, which adds an event listener to the load event. 但是无论如何，与脚本标记放置无关，脚本将在load事件触发之前执行，因此每个放置位置都适合脚本，这会将事件侦听器添加到load事件。
Gusto-wise, I would place them in the head part, since that is much more clean, especially if you have much content in the body part. 出于明智的考虑，我将它们放在头部，因为这样更干净，尤其是如果您在身体部位有很多内容时。
解决方案2
1 2019-04-14 13:20:05
You can use document.readyState API to know when the document is completely loaded. 您可以使用document.readyState API来了解何时完全加载文档。
You can refer this answer for more insight. 您可以参考此答案以获得更多见解。
https://stackoverflow.com/a/44715040/7181668 https://stackoverflow.com/a/44715040/7181668
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.