Описание
Кто работал с DOM элементами думаю заметил как постепенно загружается страница.
С постепенной загрузкой появляются огромное количество проблем. К примеру:
- Я делал у себя тёмную и светлую тему, но в начале по умолчанию появляется светлая тема (потому что проект я собрал на основе светлой темы) потом (через секунду) загружается то что было поставлено.
- Вот собственно я делал панель загрузки:
Но если страницу прокрутить вниз потом перезагрузить то загружается страница прокрученная вниз...
... а потом уже прокручивается в начало.
И ещё много маленьких проблем которые не так легко будет описать.
Со всем этим я понял что просто создать панель, а через секунду спрятать его слишком мало для загрузки.
Вопрос
Собственно как мне реализовать загрузку правильно? Может вы знаете какие нибудь способы получше?
Например я так же попробовал способ с $(document).ready
который без jquery
пишется так:
document.addEventListener
("DOMContentLoaded",
function(event)
{
//Готово
}
);
Можете кидать статьи, код и всё что поможет решить проблему.
Дополнение
Вот вам ещё код панели чтобы на дизайн не мучились.
*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
user-select: none;
-webkit-user-drag: none;
outline: none;
font-family: monospace;
}
.title
{
font-size: 30px;
font-weight: bold;
color: rgb(200, 200, 200);
}
.block
{
width: fit-content;
height: fit-content;
padding: 5px;
display: flex;
background-color: rgb(25, 25, 25);
}
<loading class="block" style="
width: 100%;
height: 100%;
display: flex;
position: absolute;
z-index: 1;">
<div style="
margin: auto;
display: flexbox;">
<img src="https://i.sstatic.net/u3jnO.png" title="Лого" style="
width: 300px;
height: 300px;
margin: auto;">
<h2 class="title" style="
margin: 30px auto 0px auto;
text-align: center;">
Загрузка
</h2>
</div>
</loading>