23
Авг
2017

Как создать прелоадер

Создателями так называемых «тяжелых» сайтов, на которых размещено множество картинок и посадочных страниц, используются прелоадеры. Эти элементы требуются для того, чтобы сделать просмотр содержимого интернет-ресурса комфортным для пользователей.

Подробнее о создании прелоадера

Схема разработки данного элемента относительно проста и состоит из нескольких этапов. Первый из них – подключение библиотеки jQuery. Второй – прописывание до закрывающегося тега </head> и  после закрывающимся закрывающегося </body>.

И так, в теги head подключаем jQuery. Будьте внимательны, если сайт у вас уже существует, вполне может быть, что библиотека уже подключена. Если это так, второй раз подключать не нужно. Нужно пропустить данный шаг. (если прелоадер откажется работать, сверьте версии jQuery)

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

Затем требуется размещение кода скрипта в футер сайта.

<script type="text/javascript">// < ![CDATA[
$(window).on('load', function () {
    var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');
    $spinner.fadeOut();
    $preloader.delay(500).fadeOut('slow');
});
// ]]></script>

Если сайт создается на WordPress, где уже прошла установка плагинов и задействована библиотека jQuery, то иногда при подключении прелоадера возникают проблемы. Чаще всего скрипты оказываются несовместимыми. Избавиться от этой неполадки можно, заменив переменную $ на jQuery.

<script type="text/javascript">// < ![CDATA[
jQuery(window).on('load', function () {
    var $preloader = jQuery('#page-preloader'),
        $spinner   = $preloader.find('.spinner');
    $spinner.fadeOut();
    $preloader.delay(500).fadeOut('slow');
});
// ]]></script>

Обязательным требованием является прописывание блока после тега </body>. Он будет виден пользователям в то время, когда сайт загружается. В данном случае контент может быть представлен текстом или изображениями.

<div id="page-preloader">
<div class="contpre">
Подождите
<small>идет загрузка</small></div>
</div>

Так же добавляем CSS

#page-preloader{
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
background: #9A12B3;
z-index: 30;}
 
.contpre small{font-size:25px;}
 
.contpre{
width: 250px;
height: 100px;
position: absolute;
left: 50%;top: 48%;
margin-left:-125px;
margin-top:-75px;
color:#fff;
font-size:40px;
letter-spacing:-2px;
text-align:center;
line-height:35px;}
 
#page-preloader .spinner {
position: absolute;
width: 40px;
height: 40px;
background: url(/preloader.gif) center center no-repeat;
background-size:40px;    
margin: -16px 0 0 -16px;}

Оптимальный вариант – размещение анимации после </body>. Это значит, что блок должен относиться к классу. spinner, а анимированный файл следует представить, как preloader.gif (картинка анимационного изображения) . Обязательное условие – размещение последнего в корне сайта. Что касается размеров, то они должны соответствовать произведенным настройкам.

Некоторые разработчики пользуются сайтом http://preloaders.net/. Он полезен тем, что позволяет в автоматическом режиме сгенерировать анимированную загрузку, но все ее настройки при этом производятся программистом.

Запись Как создать прелоадер впервые появилась Di-Grand блог о создании сайтов.

Источник: https://di-grand.com/blog/css/3678-kak-sozdat-preloader.html

Share

Тебе может это понравится...