Как скрыть элементы body через js пока идет preload сайта?

Question

[GrinchCreator]

Всем хеллоу, друзья!
Казалось элементарная вещь, но не работает.
Есть прелоадер, крутится кружок, потом по идее должен появиться сайт, но выходит так, что прелоадер накладывается на некоторые элементы.
Пример:



Цветной круг с картинкой и есть прелоадер, а все внутри кнопки + надпись не должны отображаться.

Ниже скрипт. Что не так?

do {document.querySelector(document).ready(function(e) {
document.querySelector('.startbox').css(display, none);})}
while
(window.addEventListener('load', () => {
const preload = document.querySelector('.preload');
preload.classList.add('.preload-finish');
}));

Comments

[WbICHA]

do {document.querySelector(document).ready(function(e) {
document.querySelector('.startbox').css(display, none);})}
while
(window.addEventListener('load', () => {
const preload = document.querySelector('.preload');
preload.classList.add('.preload-finish');
}));

Для чего тут вообще существует ду-вайл?

Answer 1

[GrinchCreator]

В итоге нашлось решение через css без javascript :)

.startbox{-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;}

@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}

Answer 2

[ThunderCat]

А что, просто включить все + скрыть прелоадер по готовности хтмл не вариант? Зачем все эти циклы?

Comments

[GrinchCreator]

Вы правы, ни к чему все эти циклы..

В итоге нашлось решение через css без javascript :)

.startbox{-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;}

@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}