Прелоадер – важный элемент сайтов, особенно тяжелых, с большим количеством фотографий и посадочных страниц. Использование стильного прелоадера позволит избежать раздражения посетителей сайта, вызванного длительной загрузкой.
Для подключения прелоадера сначала нужно подключить библиотеку jQuery, если она у вас еще не подключена.
Пропишите перед закрывающим тегом </head> или после закрывающего тега </body> следующий код:
|
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> прописываем блок, который будет демонстрироваться до полной загрузки сайта. В нем можно разместить все что угодно. В нашем примере это текст Подождите идет загрузка и анимация (задается в с помощью css, об этом ниже).
|
1 2 3 4 5 6 |
<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;} |
Блок с классом .spinner — это анимация загрузки. preloader.gif – это анимированный файл.
Вы можете использовать любой имеющийся, соответствующих размеров (в нашем примере 40х40px) разместив его в корне сайта.
Также вы можете воспользоваться сайтом для генерации анимированной загрузки http://preloaders.net/ На этом сайте можно выбрать понравившуюся анимацию из большого числа вариантов и настроить ее под свои нужды.
0 комментарий