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

23.08.2017

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

Подробнее о создании прелоадера

Схема разработки данного элемента относительно проста и состоит из нескольких этапов. Первый из них – подключение библиотеки jQuery. Второй – прописывание до закрывающегося тега </head> и  после закрывающимся закрывающегося </body>.

И так, в теги head подключаем jQuery. Будьте внимательны, если сайт у вас уже существует, вполне может быть, что библиотека уже подключена. Если это так, второй раз подключать не нужно. Нужно пропустить данный шаг. (если прелоадер откажется работать, сверьте версии jQuery)

Затем требуется размещение кода скрипта в футер сайта.

Если сайт создается на WordPress, где уже прошла установка плагинов и задействована библиотека jQuery, то иногда при подключении прелоадера возникают проблемы. Чаще всего скрипты оказываются несовместимыми. Избавиться от этой неполадки можно, заменив переменную $ на jQuery.

Обязательным требованием является прописывание блока после тега </body>. Он будет виден пользователям в то время, когда сайт загружается. В данном случае контент может быть представлен текстом или изображениями.

Так же добавляем CSS

Оптимальный вариант – размещение анимации после </body>. Это значит, что блок должен относиться к классу. spinner, а анимированный файл следует представить, как preloader.gif (картинка анимационного изображения) . Обязательное условие – размещение последнего в корне сайта. Что касается размеров, то они должны соответствовать произведенным настройкам.

Некоторые разработчики пользуются сайтом http://preloaders.net/. Он полезен тем, что позволяет в автоматическом режиме сгенерировать анимированную загрузку, но все ее настройки при этом производятся программистом.

Добавить комментарий

Ваш e-mail не будет опубликован.