Прелоадер для сайта WordPress.
Всем посетителям, привет! Пару дней назад, один из читателей блога, написал мне на почту вопрос. Вопрос звучал так: "Как сделать прелоадер для сайта, который и так быстро открывается?". я тоже сначала улыбнулся, но в процессе разговора (переписки), я понял о необходимости в некоторых случаях, этой функции. В этой статье, я расскажу сначала для каких ситуаций подойдет прелоадер, в каких нет, а в конце приведу готовую инструкцию.
В данном, конкретном случае, проблема была в следующем. Сайт загружается довольно быстро, в пределах 3х секунд. Это я считаю до полной загрузки всего, что есть на сайте. Но, если детальнее посмотреть, сайт загружается за секунды 2, а остальное время уже подгружаются скрипты и отложенные стили. То есть, по факту, сайтом уже можно пользоваться через 2 секунды. Но при этом, ещё часть функционала не доступна (так как ещё подгружается). Плюс к этому, если человек начинает прокручивать страницу вниз, не дождавшись полной загрузки, скролинг начинает противно дёргаться.
Задача:
Оповестить каким-то образом посетителя, что страница ещё дозагружается. Что на уровне подсознания, даст сигнал, что нужно немного подождать. Вспомните кружочек рядом с курсором при запуске программ на Windows. Именно этот кружочек меня и подтолкнул на мысль реализовать прелоадер именно около курсора, а не картинкой.

Почему прелоадер с картинкой gif не подходит в данном случае? Дело всё в том, что сайт и так загружается достаточно быстро. И установка дополнительной анимации на страницу, это не оправданный вес. Кроме того, в 2019 году особое внимание уделяют так называемой "Первой отрисовке" страницы. А в случае с прелоадером gif, вы эту отрисовку собственноручно увеличиваете, что не есть гуд!
Итак, задача есть, идея тоже есть, давайте приступим к реализации. Этот способ не будет делать никаких затемнений или засветлений на фоне, он просто будет показывать кружочек прелоадера рядом с курсором мышки.
UPD от 07.04.19: Только сейчас заметил, что данным способом успешно практикует всеми нами любимый сервис Google Analitics. А как известно, лидер задающий тренды, фигню использовать не будет. 😉 Еще один плюс, в пользу данного метода.
Как сделать прелоадер курсора на сайте.
Перед тем, как написать эту статью, я естественно проверил несколько самых популярных способов из интернета. Но практически в любом способе, есть несколько весомых минусов лично для меня, а именно:
- Подключение сторонних библиотек (если это способ с jQuery).
- Слишком много javascript кода (если это на чистом javascript).
- Использование затемнений и gif картинок (обычный прелоадер).
Все эти моменты, мне не очень нравятся. Потому-что, например у меня на блоге, и так выше крыши этих скриптов. И добавлять ещё один кусок весомого кода, вообще не вариант. Да и у вас у многих на сайтах, достаточно много кода, это же 2019 как-никак! Поэтому, я искал максимально простой способ установить прелоадер, при том, чтобы это было сделано с минимум кодов и скриптов.
Порядок действий:
- Пропишем одно условие в файле – css.
- Присвоим определенный id телу страницы – html.
- Поменяем id после полной загрузки страницы – js.
Итак, для начала открываем файл таблицы стилей на вашем сайте. Для WordPress'а это файл style.css. Кстати, чтобы эти настройки не исчезли после очередного обновления, я рекомендую сначала настроить дочернюю тему. А уже в файлах дочерней темы, делать все необходимые правки кода.
Код для стилей css.
Первым делом, нужно прописать тот самый стиль курсора, который будет показываться при загрузке страницы. Как это будет происходить? А происходить это будет так: в начале, нужно прописать стиль курсора при наведении на страницу, а после загрузки, отменить этот стиль. Для этого пропишите в файле style.css следующий код:
body#progress:hover{ cursor: progress !important; // лоадер с курсором. cursor: wait !important; // лоадер без курсора. }
В приведенном коде я указал два варианта прелоадера. Первый вариант ставит маленький кружок рядом с курсором и второй, ставит большой кружок уже без курсора. Оба лоадера являются системными для всех ОС, будь то Виндоус или Линукс, поэтому он будет работать абсолютно везде!
Вам остается только выбрать, какой вариант вам больше интересен и прописать его. Просто, удалите не нужную строчку №2 или №3.
Теперь по самому коду. В этом коде вы обращаетесь к тегу body с id="progress" на который наведен курсор. А как известно, тег body – это вся страница целиком. То есть, когда курсор будет в зоне видимости на вашем сайте, то сработает этот стиль в любом случае, потому-что всё что вы видите на странице, помещено в этот самый тег body. Думаю идея понятна. Если что, велком в комменты.
Прописываем нужный id к тегу body.
Здесь существует два варианта реализации:
- Установить нужный id с помощью джаваскрипта.
- Установить нужный id вручную.
Я выбираю второй вариант, потому-что лишний js на сайте мне не нужен, да и вам тоже. Поэтому, открываем файл header.php и ищем открывающий тег <body... . В самом конце тега, перед последней угловой скобкой > вставьте нужный вам айди, в нашем случае это – id="progress".
Именно этот айдишник мы и будем менять чтобы выключать прелоадер после загрузки страницы. То есть, сразу при переходе на страницу, сработает стиль по этому id и курсор будет с лоадером. Как только страница полностью загрузиться, скрипт, который я дам ниже, поменяет id и стили курсора вернуться в изначальное состояние. Думаю, идея понятна.
Меняем id после загрузки страницы.
Вот здесь есть тоже несколько вариантов. В основном, в интернете рекомендуют использовать библиотеку jQuery. А как я упомянул выше, мне это не очень нравиться. Ещё один вариант с кодом в 20 с лишним строк, который я тоже отверг. В конечном итоге, я придумал как это реализовать одной строчкой. Воспользуемся следующим скриптом:
<script type="text/javascript"> setTimeout(function() { document.getElementById('progress').id = "progress1" }, 3000); </script>
Этот скрипт, нужно поместить в самом конце файла footer.php перед закрывающим тегом </html> после тега </body>. Запутал? Спокойно! Вот скрин:
Итак, что тут происходит? Ну во-первых, сам скрипт начинает свою работу только после загрузки всего контента на сайте. Во-вторых, у него ещё есть период задержки. Сделал я так для того, чтобы успевали загрузиться сторонние скрипты (реклама РСЯ или Адсенс или любая другая). Эти 3 секунды, я даю именно для подгрузки рекламных скриптов и асинхронных скриптов сайта.
После того, как весь сайт загрузился и подгрузились все рекламные скрипты, вышеописанная функция просто меняет id тега body на другой. После этого, стили которые мы прописывали в начале для курсора, больше не будут срабатывать. Так как id поменялся и больше не соответствует заданному названию. Вот так всё просто!
Пока что, в интернете такого способа вы нигде не найдете, поэтому можете смело считать себя первопроходцами. Кстати, стоит понимать, что при выключенном JavaScript в браузере, пользователь будет видеть постоянно прелоадер. Но на дворе 2019 год, очень мизерный процент посетителей до сих пор паранойят и отключают js. Так что, не парьтесь!
Подведем итог.
Это именно то, что хотел мой читатель. Вы же, можете этот метод существенно доработать и дополнить новыми функциями. Например, можно ещё сделать прелоадер, когда что-то делается на сайте с помощью Ajax технологии. Конкретно в данном случае этого не нужно было, поэтому я не стал искать хорошее решение в этом направлении. Если вы знаете, как доработать максимально оптимизировано, прошу, публикуйте в комментариях, я обязательно добавлю это в статью с ссылкой на ваш сайт или блог. 😉
На этом у меня всё. Надеюсь статья была вам полезна, если да, то вы знаете что делать. А я не прощаюсь с вами, увидимся на страницах блога.
Тот читатель это я. Талантливый человек - толантлив во всём! И придумал способ для меня и написал просто бомбическую статью. Спасибо тебе огромное за помощь. Даже не ожидал, что ты так в проблему мою погрузишься. Я даже не ожидал такого трепетного отношения к читателям. Репостнул в контакт в знак благодарности. Андрей, ты красавчик!
Спасибо, Михаил. Очень приятно читать такие отзывы. Ради таких сообщений я и совершенствуюсь. Я хочу, чтобы мой блог был не просто очередным блогом, а стал реальной помощью. И из-за таких как ваш комментарий, хочется быть полезным ещё больше. Ну, конечно в меру. А то, тут некоторые чуть-ли не сайт с нуля просят сделать бесплатно.
Андрей, пишу отписаться. Шеф одобрил этот способ. После того, как я аргументировал что этот прелоадер максимально сео оптимизирован и даже гугл этим способом пользуется. В общем, огромная благодарность тебе, выручил! Буду рекомендовать твой блог.
И Вам спасибо, что оставили отзыв. Рад был помочь.
Привет Андрей! Давно не общались. Работа достала! Сейчас длинные выходные настали, и прикупил шаблон, сейчас кропотаю на ним. Посмотри с своей стороны как мастер, нормально в плане юзабилити будет?! Спасибо!
Привет, Миш. Я сегодня смотрел уже. Сначала не понял, что изменилось, потом въехал что шаблон другой. Ну выглядит довольно не плохо. Для меня сайдбара в статьях не хватает, но это лично мои предпочтения. В остальном, визуально достаточно хорошо.
Мне кажется сайдбар захламляет основной контент. Но я еще только настраиваю и тестю. Спасибо за оценку, А ты сам пишешь статьи?
Да, пишу сам. Ну и переписываю свои старые. Когда начинал только блог вести, такую муть писал капец. Сейчас смотрю и в шоке, бездарь какой-то писал?
Круто пишешь! Мне бы так уметь! Я если напишу, то потом не могу смотреть на своё творчество(. Как чуть разбогатею то буду нанимать копирайтера, а пока через WP Grabber. Ну или когда вдохновение прибудет. Для меня писать целое мучение, целый день могу просидеть.
У меня тоже так было в начале. Теперь я бы с радостью писать чаще, только времени не хватает. Да и на одну статью иногда по 2-ое суток краплю. Так что, один день это ещё ничего.
А что разве можно переписывать? Как на это поисковики смотрят?
Если переписываю с дополнениями, то хорошо реагируют. У меня первые статьи ни смысла, ни букв. По 1000 знаков, с такими статьями я бы до сих пор с 10-20 униками в сутки сидел бы.
Вот я например хочу статью переписать , но тогда и заголовок тоже надо (по запросу не проходит) а вот что с ссылкой делать? Если её изменить то Получится новая статья со стороны поисковика? А старая 404? Так ведь?!
В таком случае, я редирект на уровне htaccess делаю. Чтобы со старого адреса на новый редирект был. Ну это если статьи хотя бы чуток по смыслу подходят. Если нет, делаю редирект но только на саму страницу блога, это чтобы 404 страниц было меньше.
Для каждой новой переделанной записи редирект делать?
Ну конечно. Если изменяешь сам адрес то редирект делать обязательно. Иначе 404 страница, для поисковиков это минус в плане сео.
А как делать, я как то давно делал когда на https переходил. Как дам код сформулировать, не подскажешь? а то в сети искать, там все по разному пишут.
Я пользуюсь функцией редиректа в плагине Clearfy Pro, а код для htaccess такой:
Redirect 301 /stranica/ https://www.site.ru/new-stranica/
Первым аргументом старый адрес, вторым через пробел полный адрес новой страницы.
Ок! Спасибо поколдую!