Удалить повторяющиеся строки   •   Online-инструменты
2 959 просм
3 комм
Поделиться:

Как сделать экран загрузки (preloader) на сайте на JavaScript?

Preloader – это некая заставка, которая показывается пользователю до тех пор, пока ваш сайт полностью не прогрузился.

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

В качестве такого окна загрузки может быть как картинка или однотонный фон, так и небольшая анимация.

Основная идея работы этого окна – показываться сразу при открытии сайта и скрытие его при полной загрузке.

Реализацию такого окна я предлагаю вам на JavaScript.

Перед закрывающим тегом </body> на нужных страницах вашего сайта вставьте код:

<div id="preloader_malc">

	<div>

		Подождите, идет загрузка сайта ...

	</div>

</div>

<style type="text/css">
	#preloader_malc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
		z-index: 99
	}

	#preloader_malc div {
		background: #fff;
		width: 260px;
		height: 40px;
		line-height: 40px;
		border-radius: 8px;
		font-family: arial;
		font-size: 15px;
		color: #111;
		text-align: center;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto
	}
</style>

<script type="text/javascript">

	window.onload = function() {

		setTimeout(function() {

			document.getElementById("preloader_malc").style.display = "none";

		}, 400);

	};

</script>

Здесь, как вы заметили, мы прописали и стили, чтобы загрузка стиля окна никак не зависела от подгружаемых файлов.

По виду это окно будет выглядеть следующим образом:

Как сделать экран загрузки (preloader) на сайте на JavaScript?

По желанию вы можете сменить стиль оформления.

Ну и как всегда в качестве небольшого бонуса – в конце статьи для вас собран небольшой пак анимационных прелоадеров, которые вы можете использовать на своих проектах.

ФайлРазмерСсылка
3
комментария
Ярослав
10.01 в 18:34
а как вставить аниме?
  • 0
Ярослав, не совсем понял.

Аниме - имеется ввиду картинку анимации? Если да - то вместо текста вставляете файл как обычную картинку через тег <img...
  • 8
Сергей
18.02 в 12:51
Здравствуйте Артем, хотелось бы увидеть на вашем проекте статью про скорость загрузки сайта на DLE, что влияет на скорость, как ускорить если долго грузится итд.
  • 0
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.