TransWikia.com

Правильная загрузка

Stack Overflow на русском Asked on February 22, 2021

Описание

Кто работал с 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>
htmljavascriptзагрузка

One Answer

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>

Correct answer by MoloF on February 22, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP