Мы живём в эпоху, когда в интернете можно делать все: работать, отдыхать, играть, покупать и продавать, «готовить» еду, заниматься сексом и т.д.. Стандартный рабочий софт так же перекочевал онлайн. Практически любое приложение, будь то графический редактор, читалка-распознавала, просто удобный блокнот, давно обзавелись своей облачной версией. Ну что же, рядовому веб разработчику не гоже отставать от современных тенденций, и если вы решили обзавестись своим онлайн сервисом, то вам просто не обойтись без прелоадера.
Скорость загрузки HTML страницы будет и останется самым важным моментом при создании веб-приложения. Очень часто бывает, что воспользовавшись каким-либо тяжелым веб-ресурсом, особенно если он связан с обработкой фото-видео, мы сталкиваемся с проблемой: закончил свой проект, кликнул сохранить, а ничего не происходит! На самом деле сервер во всю «пыхтит» над поставленной задачей, вот только ему надо дать немножко времени, а пользователя отвлечь от грустных мыслей красивой анимацией прелоадера.
Уделить внимание в этой статье я решил уже готовому решению, которое использует для свой работы SVG анимацию. А также имеет 13 готовых прелоадеров для сайта и, если понадобится, вы всегда сможете на базе их придумать что-нибудь более подходящие.
Как добавить прелоадер из примеров на странице демо, мы разберём на варианте «Растягивание». Тут важно учесть, что показ прелоудера осуществляется по клику на ссылку «Демонстрация». Первым делом подключаем необходимые стили и скрипты в шапке страницы:
<link href="css/component.css" type="text/css" rel="stylesheet" />
<script src="js/snap.svg-min.js"></script>
И перед закрывающимся элементом body:
<script src="js/classie.js"></script>
<script src="js/svgLoader.js"></script>
<script src="js/loader.js"></script>
Теперь переходим непосредственно к самой HTML разметке:
<div id="pagewrap" class="pagewrap">
<div class="container show" id="page-1">
<!--
Сюда помещаем основной контент страницы,
которая изначально показана
-->
<div class="column">
<!--
Кнопка для демострации и
перехода на 2-ую страницу
-->
<p>
<a class="pageload-link" href="#page-2">Демонстрация</a>
</p>
</div>
</div>
<div class="container" id="page-2">
<!--
Контент показываемый после клика
-->
<section>
<!--
Кнопка для возврата на первую
-->
<p><a class="pageload-link" href="#page-1">Назад</a></p>
</section>
</div>
<div id="loader" class="pageload-overlay" data-opening="M20,15 50,30 50,30 30,30 Z;M0,0 80,0 50,30 20,45 Z;M0,0 80,0 60,45 0,60 Z;M0,0 80,0 80,60 0,60 Z" data-closing="M0,0 80,0 60,45 0,60 Z;M0,0 80,0 50,30 20,45 Z;M20,15 50,30 50,30 30,30 Z;M30,30 50,30 50,30 30,30 Z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
<path d="M30,30 50,30 50,30 30,30 Z"/>
</svg>
</div>
</div>
Вот и всё, но давайте рассмотрим вариант при старте страницы. Для этого нам потребуется подправить скрипт в файле loader.js. Разметку оставим прежней только уберем кнопки и блок с id=page-2, а из блока с id=page-1 удалим класс show (тогда по умолчанию страница будет спрятана).
(function(){
var pageWrap = document.getElementById("pagewrap"),
page = pageWrap.querySelector("div.container"),
loader = new SVGLoader(document.getElementById("loader"), {speedIn: 100});
function init(){
window.onload = function(){
loader.show();
setTimeout(function(){
loader.hide();
classie.addClass(page, "show");
}, 2000);
};
};
init();
})();
Вот собственно и сам код, убрав лишние и воспользовавшись методам onload() у объекта window, реализовали отработку прелоадара при старте страницы.