Как сделать прелоадер на своем сайте

Бывают такие ситуации, когда из-за использования большого количества плагинов или из-за большого подключения .сss или .js сайт загружается долго. Конечно надо оптимизировать его. Избавляться от плагинов, уменьшать код и т.д. Но бывают ситуации, когда ты просто не можешь отказаться от них. Я советую в таком случае реализовать на своем сайте прелоадер. Это может сделать более красивую загрузку сайта и уменьшит показатель отказов на вашем сайте.

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

Прежде чем сделать прелоадер на своем сайте, вы должны понимать некоторые вещи:

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

 Что нам нужно сделать

  • Внедрить html код прелоадера
  • Скрыть данным прелоадером все содержимое сайта пока он полностью не загрузится
  • Скрыть прелоадер и показать загруженный сайт

Внедрение

Для начала нам нужно сразу после открывающего тега <body> разместить следующий код:

div c классом preloader будет перекрывать основной контент, пока не загрузится весь сайт. Для него мы прописываем такие CSS-стили:

div c классом prePreloader это сам прелоадер. У меня для него такие CSS-стили:

Теперь нам нужно подключить jQuery, если он у вас еще не подключен, и потом вставить код, который ниже.

Скрипт подключения jQuery:

Код для прелоадера:

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

ДЕМО

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

icons8.com — готовые варианты на чистом CSS и HTML

Preloaders.net — СНГ генератор прелоадеров. Можно выбрать самому вариант и задать ему скорость анимации и цвет.

Если у вас есть вопросы, или нужна помощь, пишите в комментарии, обязательно помогу 🙂
Также подпишитесь на наш наш telegram-канал и соц.сети, чтобы не пропустить новые статьи и новости 😉

Оставьте ответ

comment-avatar

*