Как на странице сделать экран загрузки на JavaScript или JQuery?

21.12.2022 07:48:48 am

Всех с наступающим!
Дайти пример, или объясните на пальцах, как можно сделать экран загрузки? Допустим, пока страница полностью не загрузилась, на экране анимация загрузки страницы, или логотип сайта в середине экрана, а как страница полностью загружена, так анимация или логотип исчезает и появляется сама страница.
Спасибо заранее.

Жалоба

21.12.2022 07:55:24 pm

Например, так: Делаем блок с ID preloader, куда вставляем анимацию или лого сайта:

<div id="preloader">
    <img ... />
</div>

Вставляем его сразу после тега <body>. Чуть ниже вставляем еще один блок, со всем контентом страницы:

<div id="content">
    <!-- Контент страницы -->
</div>

На блок с ID content пишем CSS свойство display: none;, это свойство делает блок невидимым. Теперь, при помощи JS проверяем, когда будет загружена страница полностью. Как загрузится, делаем блок с ID content видимым, а блок с ID preloader невидимым:

$(window).on('load', function() {
    $('#preloader').hide();
    $('#content').show();
});

Вот и все. Как-то так.

Блок с ID preloader можно так же одарить разными стилями, для красоты.

Жалоба