Приветствую всех на своем блоге! Сегодня речь пойдет о простом скрипте, который позволяет показывать определенную заглушку пока страница полностью не загрузится. Если копнуть глубже — заглушка исчезает, когда DOM полностью загружен и готов к работе.
В качестве заглушки обычно используют индикатор в виде какой либо анимации, его еще называют preloader. Можно использовать обычную gif-картинку или анимацию средствами Css. Вот пример gif-анимации:
Html
Вставляем данный html-код на все страницы, где хотим показывать прелодер. Обычно я его вставляю в самом низу страницы перед подключением скриптов.
<div class="preloader">
<div class="preloader__loader">
<img src="loader.gif" alt="" />
</div>
</div>
javaScript
Добавляем данный jQuery-код перед закрывающим тегом </body>
.
<script>
// Preloader page
jQuery(document).ready(function($) {
$(window).on('load', function () {
var $preloader = $('.preloader'),
$loader = $preloader.find('.preloader__loader');
$loader.fadeOut();
$preloader.delay(250).fadeOut(200);
});
});
</script>
Значениями в .delay()
(задержка) и .fadeOut()
(плавное исчезновение) можно регулировать исчезновения прелодера.
Css
Оформим стилями CSS.
<style>
.preloader {
background-color: #fff;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
}
.preloader__loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
</style>
Вообще, стили можно минимизировать, чтобы они занимали меньше места.
Как уже было сказано выше, вместо gif-картинки можно использовать анимацию на Css. Например, я использую спиннеры, которые появились в Бутстрап. Вот как это выглядит.
Html-код будет следующим.
<div class="preloader">
<div class="preloader__loader">
<div class="spinner-grow text-danger" role="status" style="width: 4rem; height: 4rem;">
<span class="sr-only">Загрузка...</span>
</div>
</div>
</div>
На этом все. Если у вас есть, чем дополнить, буду только рад.
Всем удачи и до новых встреч!