Создателями так называемых «тяжелых» сайтов, на которых размещено множество картинок и посадочных страниц, используются прелоадеры. Эти элементы требуются для того, чтобы сделать просмотр содержимого интернет-ресурса комфортным для пользователей.
Подробнее о создании прелоадера
Схема разработки данного элемента относительно проста и состоит из нескольких этапов. Первый из них – подключение библиотеки jQuery. Второй – прописывание до закрывающегося тега </head> и после закрывающимся закрывающегося </body>.
И так, в теги head подключаем jQuery. Будьте внимательны, если сайт у вас уже существует, вполне может быть, что библиотека уже подключена. Если это так, второй раз подключать не нужно. Нужно пропустить данный шаг. (если прелоадер откажется работать, сверьте версии jQuery)
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> |
Затем требуется размещение кода скрипта в футер сайта.
|
1 2 3 4 5 6 7 8 |
<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.
|
1 2 3 4 5 6 7 8 |
<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>. Он будет виден пользователям в то время, когда сайт загружается. В данном случае контент может быть представлен текстом или изображениями.
|
1 2 3 4 5 |
<div id="page-preloader"> <div class="contpre"> Подождите <small>идет загрузка</small></div> </div> |
Так же добавляем CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#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/. Он полезен тем, что позволяет в автоматическом режиме сгенерировать анимированную загрузку, но все ее настройки при этом производятся программистом.
Залишити відповідь