Close

Preloader — индикатор загрузки сайта

Вариант №1.

Ресурсо-экономный
Вариант подсмотрел здесь: Popel-studio
Как только браузер полностью получил и обработал html-код страницы (обработчик достиг закрытия тега html), браузер вызывает событие DOMContentLoaded, также известное как DOM Ready. Как только последний внешний ресурс загружен, браузер вызывает событие window.onload. Страница полностью загружена.

pageload

Идем по порядку. В header указываем стили нашего фона пред-загрузки и красивого gif спиннера. Кстати, хороший набор спиннеров на preloaders.net


<style type="text/css">
#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 100500;
}
#page-preloader .pre-spinner {
width: 32px;
height: 32px;
position: absolute;
left: 50%;
top: 50%;
background: url('images/preloader.gif') no-repeat 50% 50%;
margin: -16px 0 0 -16px;
}
</style>

Подгружаем jQuery также в header

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Далее запускаем jQuery скрипт. Если начать скрипт с $(document).ready(function(), это будет означать ожидание до загрузки HTML и построения DOM-дерева. $(window).on(‘load’, function () означает ожидание полной загрузки включая картинки, видео и т.д, что существенно дольше.

<script>
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.pre-spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
</script>

Поместим следующий html-код сразу после открывающего тега body

<div id="page-preloader"><span class="pre-spinner"></span></div>

Все.

Вариант №2.

Preloader.js. Скрипт весит 13 кб.
Источник: PreloaderPreloader on Github


<!-- Preloader -->
<script src="js/queryloader2.min.js" type="text/javascript"></script><!-- Preloader init --><script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
new QueryLoader2(document.querySelector("body"), {
barColor: "#dedede",
backgroundColor: "#fff",
percentage: true,
barHeight: 1,
minimumTime: 200,
fadeOutTime: 1000
});
});

</script>

Поделитесь статьей «Preloader — индикатор загрузки сайта»

Добавить комментарий

Ваш адрес email не будет опубликован.

Автор: Stas Zygar

Привет! С наступившим новым годом! Всем счастья.