Где я должен разместить сценарий экрана загрузки JavaScript в HTML-документе?
Я только что сделал загрузочный экран с помощью 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Документы (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 скрипты загружались бы сразу.
Но в любом случае, независимо от размещения тега script, сценарии будут выполняться до того, как будет запущено событие load, поэтому любое размещение подходит для сценария, который добавляет прослушиватель событий к событию load.
Что касается удовольствия, я бы поместил их в часть головы, так как это намного чище, особенно если у вас много контента в части тела.
Вы можете использовать API документ.readyState, чтобы узнать, когда документ полностью загружен.
Вы можете обратиться к этому ответу для получения дополнительной информации.
https://stackoverflow.com/a/44715040/7181668
Я не знал такого способа проверки. Так интересно! Я действительно ценю вас.
Итак, каждое размещение в порядке. Также ваш последний комментарий был полезен для меня. Большое спасибо!!