0

Описание

Кто работал с DOM элементами думаю заметил как постепенно загружается страница.
С постепенной загрузкой появляются огромное количество проблем. К примеру:

  1. Я делал у себя тёмную и светлую тему, но в начале по умолчанию появляется светлая тема (потому что проект я собрал на основе светлой темы) потом (через секунду) загружается то что было поставлено.
  2. Вот собственно я делал панель загрузки:

Но если страницу прокрутить вниз потом перезагрузить то загружается страница прокрученная вниз...

... а потом уже прокручивается в начало.

И ещё много маленьких проблем которые не так легко будет описать.
Со всем этим я понял что просто создать панель, а через секунду спрятать его слишком мало для загрузки.


Вопрос

Собственно как мне реализовать загрузку правильно? Может вы знаете какие нибудь способы получше? Например я так же попробовал способ с $(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.stack.imgur.com/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>

1 ответ 1

1

document.addEventListener('DOMContentLoaded', () => {
    // Задержка для наглядности
    setTimeout(() => document.body.classList.add('page-loaded'), 1000);
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: monospace;
    overflow: hidden;
}

body.page-loaded {
    overflow: auto;
}

body.page-loaded .pre-loader {
    transform: translateY(-100%);
    visibility: hidden;
    transition: visibility 0s 1s, transform 1s;
}

.pre-loader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgb(25, 25, 25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(0);
    visibility: visible;
}

.pre-loader img {
    max-width: 25%;
}
.pre-loader .title {
    margin-top: 20px;
    font-size: 30px;
    font-weight: bold;
    color: rgb(200, 200, 200);
}
<div class="pre-loader">
    <img src="https://i.stack.imgur.com/u3jnO.png" alt="">
    <h2 class="title">Загрузка</h2>
</div>

<div class="content">
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum ipsam vitae eius aperiam, quos nobis dolorem cupiditate, magnam quis voluptatibus consequuntur, facilis asperiores rem! Ut, placeat officiis at quas nisi.</h1>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum ipsam vitae eius aperiam, quos nobis dolorem cupiditate, magnam quis voluptatibus consequuntur, facilis asperiores rem! Ut, placeat officiis at quas nisi.</h1>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum ipsam vitae eius aperiam, quos nobis dolorem cupiditate, magnam quis voluptatibus consequuntur, facilis asperiores rem! Ut, placeat officiis at quas nisi.</h1>
</div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.