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

Перед тем как начну описывать плагин и принцип его работы, настоятельно рекомендую . Только в том случае если все указанные рекомендации не помогут, тогда вся надежда на прелоадер и его влияние на терпение пользователей сайта.

Что такое прелоадер (preloader)

Прелоадер - это механизм вывода анимации или индикатора загрузки, до полной обработки веб страницы и вывода ее на экран. Другими словами, пока страница сайта обрабатывается и загружается браузером, на экран выводиться анимация, которая заменяет пустой экран.

Я противник данного инструмента, считаю что лучше оптимизировать загрузку сайта чем ставить прелоадер. В моем понимании прелоадер нужен только крупным порталам, интернет магазинам и интернет сервисам с огромными базами данных, которые обрабатывают миллионы данных и у них ну никак не получиться ускорить загрузку. Это лично мое мнение и со мной вы можете не согласиться.

По статистике если сайт грузиться более 4 секунд, возникает большая вероятность отказа. Пользователь может покинуть сайт так и не дождавшись полной загрузки, а это очень плохой показатель. При нормальной оптимизации, не идеальной, но все же, мой сайт грузиться за 2-3 секунды и этот показатель вполне устраивает меня, и как показывает статистика пользователей тоже. По этому еще раз говорю о том, при медленной загрузке сайта нужна оптимизация, а не прелоадер.

После небольшого предисловия вернемся к нашим «баранам». Установим и настроем плагин.

Плагин The Preloader, обзор и настройка

Самый адекватный и бесплатный плагин прелоадер, который я нашел это плагин с уникальным названием - Прелоадер. Да вот так, никаких неожиданностей. Дело в том, что при поиске плагина в библиотеке wordpress.org, вы его не найдете. Нужно в строку поиска писать the preloader. Как устанавливать плагин можно узнать . Выглядит он так:

После установки переходим во вкладку Плагины/Preloader, с этого небольшого меню и начинаются настройки.

Итак, все настройки в коротком списке:

• Первой строчкой настройки является цвет заднего фона прелоадера, по умолчанию он белый (#FFFFFF). Вы можете задать интересующий вас параметр.
• Второе, это место размещение gif анимации, ее можно будет поменять на любую, нужно только учитывать размер 128х128 пикселей. По предложенной в настройках ссылке вы можете скачать интересующую вас анимацию.
• Следующим шагом будет выбор директорий где будет подгружаться прелоадер. Можно установить загрузчик на категории, на весь сайт, отдельно на страницы меток, или только на главную, вам решать.
• Последнее что вам нужно сделать это открывать файл header.php в папке вашей активной темы и добавить сразу после открывающегося тега предложенный див ().
• Если плагин активен, тогда вы сможете уже убедиться в работоспособности плагина.

Стоит еще заметить что при смене GIFки ее название должно быть preloader, и такая анимация в папке плагина image должна быть только одна.

На этом скромное руководство по использованию плагина Preloader для сайта на WordPress закончено, если будут вопросы или проблемы, пишите в комментариях.

Привет, друзья. Бывает такое, что из-за использования тяжелых плагинов и сайт грузиться непозволительно долго. В таких случаях я рекомендую избавляться от них, либо искать менее «тяжелый» аналог. Но иногда — его просто нет. В таком случае можно попробовать использовать прелоадер, чтобы немного развлечь (отвлечь) пользователя. Но не все знают, как подобный функционал реализовать…

Первым делом стоит упомянуть, что использование прелоадера целесообразно в случаях, когда долго грузится главный экран или тогда, когда контент грузится кусками. Все это может привести либо к мгновенному уходу пользователя с сайта, либо к негативному впечатлению о компании вцелом.

Как сделать прелоадер для landing page

Прежде чем начать делать preloader, нужно немножко уяснить суть того, как браузер загружает страницу. Не буду расписывать весь цикл, так как у самого довольно абстрактное представление, но важно понять, что в целях экономии времени, браузер грузит (отображает) код поэтапно и не дожидается полной загрузки страницы, а в случае подключения js, так вообще прекращает загрузку, пока не выполнит подключаемый файл. Это значит, что загрузка (отображение) остального контента приостанавливается до полной загрузки js файла. В общем, проблем достаточно, давайте теперь попробуем их решить при помощи прелоадера.

Теперь пару слов для понимания того, что мы делаем:

• В самом начале размещаем div c прелоадером
• Скрываем прелодером содержимое сайта до момента полной загрузки страницы
• Скрываем прелоадер и показываем страницу

Теперь, сразу после открытия тега body разместим следующий div:

Скорее всего, если у вас проблемы с загрузкой сайта, значит у вас много качественных изображений и различных тяжеловесных скриптов, а значит, вы наверняка используете и jQuery, поэтому для того, чтобы наш preloader исчез после того, как загрузится основное содержимое, воспользуемся следующим скриптом:

$(window).on("load", function () { $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader.delay(350).fadeOut("slow"); });

Размещайте его где-нибудь после подключения jQuery.

Немного поясню html. LoaderArea — фоновая область, которая перекрывает основной контент. CSS этого дива такой:

LoaderArea { background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); overflow: hidden; position: fixed; left: 0; top: 0; right:0; bottom:0; z-index: 100000; }

Loader — это активная область (сам прелоадер). Так как я решил делать его при помощи только CSS, то у него такие стили:

Loader { height: 40px; width: 40px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; } .loader:before, .loader:after { content: ""; height: 40px; width: 40px; border: 8px solid rgba(255,255,255,.5); border-radius: 10px; position: absolute; top: 0; } .loader:before { animation: animate 2s infinite linear; } @keyframes animate { 0% { transform: rotate(0) skew(0); } 100% { transform: rotate(180deg) skew(360deg); } } .loader:after { animation: animate2 2s infinite linear; } @keyframes animate2 { 0% { transform: rotate(0) skew(0); } 100% { transform: rotate(-180deg) skew(-360deg); } }

Исходник прелоадера я взял с Codepeen. Вот ссылки на несколько интересных вариантов.

Доброго времени суток уважаемые подписчики, читатели и просто посетители нашего сайта! Начинаю этот материал я с новой ступени для себя отсчета, а точнее с 101 урока , который, надеюсь, Вам пригодится и понравится. Вообще, использование прелоадера для сайта широко известная тема среди разных анимации и эффектов, но я замечал, что многие из них, имеют очень громозкий и не удобный код, поэтому решил написать что то попроще и использовал для этого jQuery .

Рассматривая данный материал, хочу заметить, что исполнение данного кода работает каждый раз при обновлении страницы и если Вам потребуется это сделать при нажатии или загрузке страницы, можете написать в комментариях сайте, тогда сможем разобрать более детально данный материал.

И так, прежде чем приступить к изучению кода, я подготовил специально для Вас видеоматериал, с подробным ознакомлением данного урока, который Вы можете также посмотреть, если не хотите читать текст или вдруг у Вас возникли какие-либо вопросы.

Первый шаг. HTML.

Для начала, я решил сделать картинку, которая имеет разрешение GIF формата, что позволяет нам более эффективно использовать прелоадер для сайта. Данную картинку я загрузил в папку img , где и будет также лежать обычная картинка PNG , которая будет использоваться после загрузки страницы.

Теперь, нам стоит подключить необходимые стили и скрипты, чтобы данный код успешно отрабатывал. Подключаем библиотеку jquery.min.js , а также сам скрипт load.js , который и будет выполнять функцию прелоадера. Также не забываем про стили, которые у нас находятся в файле demo.css .

Далее создаем div блок с идентификатором load , который и будет взаимодействовать со скриптом и выполнять данный эффект. После создаем блочный контейнер, в нем размещаем картинку, нашей GIF анимации и чуть ниже выводим какой-то произвольный текст.

Завершаем HTML код простым выводом картинки PNG .

Второй шаг. jQuery.

Сам скрипт очень простой, не знаю нужны ли будут комментарии, но думаю все-таки напишу, чтобы было меньше вопросов. Ну, во-первых, скрипт работает в окне, который выполняет требования идентификатора load . Во-вторых, данному идентификатору присваивается задежка с помощью функции delay в 2500 мс , чтобы как раз таки и был виден данный эффект, после идет функция fadeOut со значением slow , что позволяет показывать нам сам сайт, после задержки. Все достаточно элементарно и просто, как видите.

$(window).on("load", function () { $("#load").delay(2500).fadeOut("slow"); });

Третий шаг. CSS.

Переходим к последнему шагу, в котором пропишем все необходимые стили для правильной работы скрипта. Сразу хочу отметить, что все свойства и значения (кроме, пожалуй, background , text-align ) идентификатора load и load div обязательны, иначе правильно у Вас ничего работать не будет.

Тогда я немного поразмыслив, решил, что нужно что-то, что скроет загрузку сайта, а покажет что-то в замен, а когда страница загрузится полностью, тогда уже будет показан посетителю в полном объеме. Поискав немного то что мне нужно, я скрестил несколько скриптов и немного добавил своего в стилях, я получил нужный мне результат. Теперь посетители посадочной страницы видят небольшую заставку, прежде чем увидят полностью загруженный контент. Скрипт работает таким образом, что он грузится в первую очередь и показывает то, что мы зададим в настройках, после загрузки страницы браузер вызывает событие window.onload и наш скрипт показывает загруженную страницу.

Выглядит это примерно так, чем дольше будет грузится страница, тем дольше будет показана заставка:

На свой сайт или страницу подключить такой прелоадер, можно довольно не сложно. Первое что понадобится сделать для осуществления задумки, это конечно же вставить HTML разметку. Сделать это можно, например в шапке сайта. Вставьте в любое место, лучше всего сразу после открывающего тега body . Это основной блок с ID p_prldr , который будет заполнять весь экран и внутри которого можно расположить что угодно, что увидит посетитель до полной загрузки страницы. Внутри этого блока разместим анимацию загрузки и текст.

#p_prldr{ 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;} #p_prldr .svg_anm { position: absolute; width: 41px; height: 41px; background: url(images/oval.svg) center center no-repeat; background-size:41px; margin: -16px 0 0 -16px;}

Блок с классом svg_anm , это наша анимация. В своем прелоадере я использую SVG графику для анимации. Ее можно масштабировать до нужных мне размеров и выглядит она реалистично и прикольно. Если хотите, можете использовать какую-то GIF анимацию или просто статичную картинку, все зависит от Вашей фантазии. У меня это файл oval.svg его размер я установил параметром background-size:41px; , также нужно указать ширину и высоту блока равную размерам анимации. width: 41px; height: 41px;

Если Вам тоже по душе такая анимация, можете выбрать из ниже приведенных, для этого правой кнопкой миши щелкните по нужной и сохраните в нужную папку.

Ну и сами анимации.

Фон анимации установлен вручную и он будет у Вас как в основном блоке прелоадера, сама анимация белая, так что если откроете ее после скачивания, то ничего не увидите 🙂 Чтобы потом не писали, что не работает.

Чтобы все заработало, нужно добавить сам скрипт прелоадера, но для начала Вы должны убедится, что у Вас подключена библиотека jQuery . Если это не сделано то в шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавляем такую строку:

После нее, вставляем уже сам скрипт.

$(window).on("load", function () { var $preloader = $("#p_prldr"), $svg_anm = $preloader.find(".svg_anm"); $svg_anm.fadeOut(); $preloader.delay(500).fadeOut("slow"); });

Если Вы не меняли айди главного блока и класс блока с анимацией, то в скрипте менять ничего не надо. Можно только настроить одну вещь, а именно задержку перед показом страницы. Когда страница загрузится, блок с анимацией исчезнет и плавно появится содержимое страницы, но можно установить еще задержку. В данном скрипте она равна 500 миллисекундам то есть пол секунды, можете уменьшить или наоборот увеличить если Вам это нужно.

Все сделано правильно и результат должен порадовать Вас. Главное не спешите и внимательно выполните инструкцию.

На этом все, спасибо за внимание. 🙂

В зависимости от типа веб-ресурса и объема информации на нем, загрузка сайта может занять от нескольких миллисекунд до пары секунд. В процессе загрузки с сайтом может происходить множество вещей: верстка может прыгать в разные стороны, текст может менять начертание. Возникает вполне закономерное желание спрятать всю эту вакханалию подальше от глаз посетителей. Для этого и предназначены прелоадеры.

Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного gif-изображения, так и в виде шкалы загрузки. Но независимо от внешнего вида прелоадера, принцип его работы будет одним и тем же: как можно раньше показать пользователю индикатор загрузки, а по окончании загрузки этот индикатор скрыть.

Как загружается веб-страница

Прежде чем создать индикатор какого бы то ни было процесса, нужно разобраться в самом процессе. Загрузка веб-страниц — не исключение. Итак, как же загружается веб-страница?

Браузер отправляет запрос на сервер.

Сервер начинает отправлять браузеру html-код страницы. Специфика передачи данных в интернете такова, что код страницы браузер получает не сразу, а по частям.

В целях экономии времени браузер начинает обработку html-кода страницы, не дожидаясь окончания документа.

Как только в коде страницы браузер встречает внешний ресурс, он отправляет на сервер запрос на получение этого ресурса. При этом, в большинстве случаев, если этот ресурс — javascript-файл, то дальнейшая обработка страницы прекращается до полной загрузки и выполнения javascript-кода этого файла.

Как только браузер полностью получил и обработал html-код страницы (обработчик достиг закрытия тега html), браузер вызывает событие DOMContentLoaded , также известное как DOM Ready .

Как только последний внешний ресурс загружен, браузер вызывает событие window.onload . Страница полностью загружена.

Процесс создания

Теперь, понимая порядок загрузки веб-страницы, можно сформировать для себя список задач и условий для нашего прелоадера. Мои условия для него таковы:

• Должен отображаться как можно раньше, закрывая собой весь контент.
• По возможности, отображение не должно зависеть от внешних ресурсов.
• Должен скрываться, как только загрузка страницы полностью завершена. Для скрытия можно использовать любую доступную javascript-библиотеку.

Если ваша страница практически не зависит от графики, то вместо window.onload для скрытия прелоадера можно использовать DOM Ready .

Для решения первой задачи поместим следующий html-код сразу после открывающего тега body:

Для нашего прелоадера нам понадобятся стили, но зависить от внешних файлов мы не хотим, поэтому разместим стили прямо в документе, где-нибудь внутри head:

#page-preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 100500; } #page-preloader .spinner { width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; background: url("/images/spinner.gif") no-repeat 50% 50%; margin: -16px 0 0 -16px; }

К сожалению, полностью отказаться от внешних ресурсов у меня не выйдет, ведь нам нужно анимированное gif-изображение. Но, учитывая небольшой размер самого изображения, это допустимая жертва.

Теперь осталось только скрыть наш прелоадер после загрузки страницы. Здесь мы уже не ограничены в средствах, поэтому можем использовать jQuery:

$(window).on("load", function () { var $preloader = $("#page-preloader"), $spinner = $preloader.find(".spinner"); $spinner.fadeOut(); $preloader.delay(350).fadeOut("slow"); });

Готово! Теперь вместо скачущей в разные стороны верстки посетитель во время загрузки страницы будет видеть наш аккуратный экран загрузки. А работающую версию такого прелоадера можно увидеть на сайте