Приветствую всех! В данной статье разберем как показать прелодер (preloader) во время загрузки страницы. То есть до тех пор пока DOM не будет готов у нас на странице будет показана анимация. Все это реализуем на чистом js + css, без использования jQuery. В качестве анимации можно использовать gif-картинку или сделать анимацию на чистом css. Вот пример гифки.
И так, сначала добавим нtml-код прелодера на html-страницу где-нибудь ниже, например, перед закрывающим тегом body. Причем вставляем данный код на всех html-страницах, где должен показываться данный preloader.
Здесь я в качестве анимации я использую спиннеры bootstrap, так как у меня подключен фреймворк Bootstrap. Но можно и любую гифку, типа того, что приведено выше. Здесь уже на ваше усмотрение.
Что касается кода js, то он будет следующим.
Если вы заметили, то в коде присутствуют теги script и это говорит о том, что данный код мы вставляем в html-страницу перед закрывающим тегом body, то есть в самом низу. Можно конечно вынести во внешний js-файл, но желательно встроить именно в html.
Обратите внимание, что мы выполняем код только после того, как объектная модель страницы готова к работе. Для этого задействуем событие DOMContentLoaded. Данное событие срабатывает, когда все объекты на странице загружены и готовы к работе, но такие ресурсы, как картинки, видео и т.д. еще могут быть не загружены. По большому счету нам это и нужно, если будем ждать загрузки всех ресурсов, то прелодер будет показываться долго и это может реально раздражать пользователя.
Анимацию появления и исчезновения вешаем на свойство opacity, а через 500 мс. скрываем в display: none, чтобы они не занимали место на странице.
Что касается кода css, то он будет следующим:
Его вставляем в html, как критический css в самом вверху страницы в секцию head. Можно также минимизировать код, чтобы он меньше занимал места на странице.
Встраивание кода css, js прямо в html нужно для того, чтобы не было задержек при загрузке самого прелодера.
Как это работает можно посмотреть на демо.
Вот в принципе и все. Будут вопросы, задавайте в комментариях. Помогу, чем смогу. Удачи!