Как сделать экран загрузки (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>Здесь, как вы заметили, мы прописали и стили, чтобы загрузка стиля окна никак не зависела от подгружаемых файлов.
По виду это окно будет выглядеть следующим образом:
По желанию вы можете сменить стиль оформления.
Ну и как всегда в качестве небольшого бонуса – в конце статьи для вас собран небольшой пак анимационных прелоадеров, которые вы можете использовать на своих проектах.
