Код не работает, это отдельный файл js, но он работает, когда я помещаю его в <script>
Итак, как говорится в заголовке, я хочу создать загрузчик, но скрипт работает, когда я помещаю его в файл html, но не работаю, когда я помещаю его в свой отдельный файл js.
Вот сценарий:
var loader = document.getElementById("ld");
window.addEventListener("load", function()
{
loader.style.display = "none";
})
и вот html:
<!DOCTYPE html>
<html lang = "en">
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<meta name = "author" content = "Bilal el Badaoui">
<meta name = "description" content = "The best clothes for the best price">
<link rel = "stylesheet" href = "style.css">
<script src = "script.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<title>S&B Clothes</title>
<link rel = "icon" type = "image/x-icon" href = "logo/icons8-needle-96.png">
</head>
<body id = "body">
<div class = "loader" id = "ld"></div>
</body>
Ссылка: Окно: событие DOMContentLoaded
я получаю «Uncaught TypeError TypeError: невозможно прочитать свойства null (чтение« стиля »)»
вы можете попробовать включить свой скрипт в конец тела
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
В этом блоке проблема. Измените этот блок:
var loader = document.getElementById("ld");
window.addEventListener("load", function()
{
loader.style.display = "none";
})
к:
window.addEventListener("load", function()
{
var loader = document.getElementById("ld");
loader.style.display = "none";
})
Почему? Вы включаете свой js-скрипт в заголовок своего дома. Затем вам нужно подождать, если весь дом загружен. Потому что ваш скрипт начнет выбирать незагруженный элемент. По этой причине вы должны поместить свой код в событие загрузки.
Привет @Квентин! Можете ли вы объяснить, почему, пожалуйста? Спасибо :-)
вы должны использовать DOMContentLoaded не загружать как событие. Также изменения стиля в 2023 году должны производиться на уровне CSS.
Если у вас возникли проблемы со связью с вашим внешним js-файлом, можете ли вы просто попробовать добавить строку ниже, чтобы проверить это? И можете ли вы также поделиться, находится ли файл js в том же каталоге, что и ваш файл html, или в другом каталоге? Если оба файла находятся в одном каталоге, вы должны получить сообщение «hello world».
alert('hello world')
var loader = document.getElementById("ld");
window.addEventListener("load", function()
{
loader.style.display = "none";
})
Код читается сверху вниз, поэтому сначала он читает скрипт и не видит id "ld", после скрипт читает тело и теперь видит id. Таким образом, вы должны поместить script после div, чтобы сначала прочитать его, а затем script может видеть элементы тела. Поэтому поместите скрипт в конец тела.
<!DOCTYPE html>
<html lang = "en">
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<meta name = "author" content = "Bilal el Badaoui">
<meta name = "description" content = "The best clothes for the best price">
<link rel = "stylesheet" href = "style.css">
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<title>S&B Clothes</title>
<link rel = "icon" type = "image/x-icon" href = "logo/icons8-needle-96.png">
</head>
<body id = "body">
<div class = "loader" id = "ld"></div>
<script src = "script.js"></script>
</body>P.S. Извините за мой английский)
Это может решить проблему, но это самый неэффективный метод (без асинхронной загрузки).
Not workingплохое описание. Что говорит консоль инструментов Dev?Type reference Error: Element is null? Добавьте атрибутdeferк скрипту ag и посмотрите, исправит ли он это. PS: Вы, наверное, тоже хотитеDOMContentLoaded, а неloadкак событие.