Добрый день!
Столкнулся с такой ситуацией.
Есть страница:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/main.js"></script>
</head>
<body>
<div id="wr" class="no_js_wr"></div>
</body>
Стили в css/style.css:
.no_js_wr{background-color:#FFFFFF;}
.js_wr{background-color:#d2d2d2;}
Скрипт js/main.js:
(function (w, d) {w.addEventListener("load",loadBeg);
function loadBeg() {
d.getElementById("wr").classList.remove("no_js_wr");
d.getElementById("wr").classList.add("js_wr");
}
}(window, document));
Эта замена нужна, чтобы при отключенном пользователем js было одно, а при включенном - другое.
Происходит следующее - когда в браузере (например, Chrome - версия 90.0.4430.93) первый раз (после очистки истории браузера) загружается страница - браузер не успевает (????) удалить класс .no_js_wr и добавить .js_wr. Причем, такое впечатление, что браузер считает, что js отключен или скрипта нет. Через мгновение передумывает и выполняет скрипт.
Других скриптов на странице нет.
Если же обновить страницу в браузере или закрыть/открыть браузер - все нормально.
Может кто-нибудь объяснить - это нормально?
Или я выбрал принципиально неверный/устаревший способ как сделать страницу с учетом отключения js пользователем?
Спасибо!
Update:
Виновато событие Load, а точнее картинки, которые загружались.
Правильно было ждать в js DOMContentLoaded.
Большое спасибо WbICHA!
Простой