Создание прелоадеров стало очень модными, ведь они выглядят красиво, а главное заставляют пользователя не покинуть сайт пока он еще грузиться.
Как же сделать прелоадер для сайта?
Сам прелоадер можно сделать всего за пару секунд, если использовать готовые решения или же за пару минут, если писать все самому с чистого листа :)
Но давайте все по порядку...
Сама суть браузера заключается в том, что он отображает код поэтапно. Это означает что браузер проходит весь код сверху вниз и если где-то посередине кода он встретит тяжелые JS скрипты, то сайт немного застынет на этом моменте.
Preloader делает так, что мы скрываем весь контент сайта и отображаем его полностью только тогда, когда весь сайт будет загружен со всеми скриптами и стилями.
Краткая схема работы прелоадера:
- Буквально сразу после открывающегося тега
bodyразмещаемdivc прелоадером; - Включаем прелоадер и скрываем все содержимое страницы;
- После загрузки страницы убираем preloader и показываем сайт.
Теперь разберемся с кодом. Изначально вам надо поместить div с прелоадером, что-то вроде этого:
<div >
<div ></div>
</div>Дальше стоит добавить стили, чтобы прелоадер занимал всю ширину экрана и смотрелся как-то неплохо:
.areaForLoader {
background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%);
overflow: hidden;
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 9999;
}Последним делом вам надо скрывать прелоадер. Для этого можно воспользоваться следующим кодом на jQuery:
$(window).on('load', function () {
$preloader = $('.loaderArea'),
$loader = $preloader.find('.loader');
$loader.fadeOut();
$preloader.delay(350).fadeOut('slow');
});По сути вам только остается добавить какую-нибудь красивую анимацию к вашим прелоадерам. Кроме того, я нашел несколько интересных примеров прелоадеров, так что вы можете их глянуть:
See the Pen by Matthew Roelle () on .
See the Pen by Mr Alien () on .
See the Pen by ZeroSpree () on .
Создание прелоадера при помощи плагинов
Также существуют и другие способы создания прелоадеров и полос загрузки. К примеру, вы можете воспользоваться специальным плагином для создания красивой полосы загрузки или же воспользоваться .
Как раз об этих двух вещах отлично рассказано в видео уроке по созданию прелоадера, поэтому советую вам посмотреть этот видео урок:
И напоследок, оставлю здесь весь код из видео урока выше, чтобы вам было легче во всем разобраться:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="nprogress.css">
<link href="https://itproger.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>Preloader</title>
</head>
<body>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="nprogress.js"></script>
<script>
$(document).ready (function () {
NProgress.start ();
NProgress.set (0.4);
setTimeout(function () {
NProgress.done ();
}, 4000);
});
</script>
<!-- HelloPreload http://hello-site.ru/preloader/ -->
<style type="text/css">#hellopreloader>p{display:none;}#hellopreloader_preload{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) center center no-repeat;background-size:131px;}</style>
<div id="hellopreloader"><div id="hellopreloader_preload"></div><p><a href="http://hello-site.ru">Hello-Site.ru. Бесплатный конструктор сайтов.</a></p></div>
<script type="text/javascript">var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},1000);};</script>
<!-- HelloPreload http://hello-site.ru/preloader/ -->
</body>
</html>Количество показов: 2613
1 мая 2017