Простой прелоадер для сайта

Прелоадер для сайта WordPress.

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

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

Задача:

Оповестить каким-то образом посетителя, что страница ещё дозагружается. Что на уровне подсознания, даст сигнал, что нужно немного подождать. Вспомните кружочек рядом с курсором при запуске программ на Windows. Именно этот кружочек меня и подтолкнул на мысль реализовать прелоадер именно около курсора, а не картинкой.

Почему прелоадер с картинкой gif не подходит в данном случае? Дело всё в том, что сайт и так загружается достаточно быстро. И установка дополнительной анимации на страницу, это не оправданный вес. Кроме того, в 2019 году особое внимание уделяют так называемой "Первой отрисовке" страницы. А в случае с прелоадером gif, вы эту отрисовку собственноручно увеличиваете, что не есть гуд!

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

UPD от 07.04.19: Только сейчас заметил, что данным способом успешно практикует всеми нами любимый сервис Google Analitics. А как известно, лидер задающий тренды, фигню использовать не будет. 😉 Еще один плюс, в пользу данного метода.

Как сделать прелоадер курсора на сайте.

Перед тем, как написать эту статью, я естественно проверил несколько самых популярных способов из интернета. Но практически в любом способе, есть несколько весомых минусов лично для меня, а именно:

1. Подключение сторонних библиотек (если это способ с jQuery).
2. Слишком много javascript кода (если это на чистом javascript).
3. Использование затемнений и gif картинок (обычный прелоадер).

Все эти моменты, мне не очень нравятся. Потому-что, например у меня на блоге, и так выше крыши этих скриптов. И добавлять ещё один кусок весомого кода, вообще не вариант. Да и у вас у многих на сайтах, достаточно много кода, это же 2019 как-никак! Поэтому, я искал максимально простой способ установить прелоадер, при том, чтобы это было сделано с минимум кодов и скриптов.

Порядок действий:

1. Пропишем одно условие в файле – css.
2. Присвоим определенный id телу страницы – html.
3. Поменяем 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.

Здесь существует два варианта реализации:

1. Установить нужный id с помощью джаваскрипта.
2. Установить нужный 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 технологии. Конкретно в данном случае этого не нужно было, поэтому я не стал искать хорошее решение в этом направлении. Если вы знаете, как доработать максимально оптимизировано, прошу, публикуйте в комментариях, я обязательно добавлю это в статью с ссылкой на ваш сайт или блог. 😉

На этом у меня всё. Надеюсь статья была вам полезна, если да, то вы знаете что делать. А я не прощаюсь с вами, увидимся на страницах блога.