Приветствую всех на своем блоге! Сегодня речь пойдет о простом скрипте, который позволяет показывать определенную заглушку пока страница полностью не загрузится. Если копнуть глубже — заглушка исчезает, когда 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>На этом все. Если у вас есть, чем дополнить, буду только рад.
Всем удачи и до новых встреч!
Загрузка...