YouTube замедляют, а ваши автовебинары там? Перенести их на GetCourse, чтобы не просесть в продажах
ИНСТРУКЦИЯ
ИИ-бот GetCourse
ИИ-бот
Добрый день!
Я - бот-помощник по документации платформы Getcourse, помогу вам найти ответ на справочный вопрос по работе системы. Пожалуйста, сформулируйте свой вопрос одним сообщением.
Статья была полезной?
Важно
Статья предназначена для продвинутых пользователей, имеющих базовые знания верстки (HTML, CSS и JavaScript). Статья носит ознакомительный характер и не является исчерпывающим руководством по написанию кода.
Прелоадер — это экран с анимацией или индикатором, который отображается во время загрузки сайта.
Страницы любого сайта загружаются не мгновенно, а постепенно. На объемных страницах часть контента может быть недоступна до окончания загрузки страницы. Чтобы улучшить впечатление пользователя о сайте, можно скрыть для него процесс загрузки страницы, а вместо него показать небольшую анимацию или индикатор, который автоматически скроется после окончательной загрузки страницы.
В статье рассмотрим, в каких ситуациях рекомендуется использовать прелоадер, а также как с помощью стороннего кода добавить его на страницы в виде простой анимации из примера ниже.
![<p>Появление прелоадера (экрана загрузки) при переходе на страницу</p> <p>Появление прелоадера (экрана загрузки) при переходе на страницу</p>](https://fs01.getcourse.ru/fileservice/file/download/a/116/sc/273/h/a4615a23a107ad4ffcc9323f3aa64d6f.gif)
Появление прелоадера (экрана загрузки) при переходе на страницу
Как понять, нужен ли прелоадер на странице
Рекомендуется добавить прелоадер на страницу:
- если она содержит большой объем контента (изображения, видео, аудио);
- если на ней есть сложные анимации или интерактивные элементы, которым требуется время на загрузку;
- если в аккаунте есть пользователи с медленным интернет-соединением или устройствами с ограниченными ресурсами.
Когда использование прелоадера необязательно:
- если страница содержит минимум контента и загружается быстро;
- если страница простая, статичная и на ней нет сложных элементов, скриптов или анимаций.
Что важно знать перед добавлением прелоадера
- Прелоадер не обеспечивает более быструю загрузку страницы, а только показывает пользователю, что она в процессе загрузки.
- Если вы уже используете какой-либо код на странице или в настройках аккаунта, контроль корректности его работы по-прежнему остается на вас, т.к. предсказать поведение стороннего кода после добавления прелоадера не представляется возможным.
- Специалисты нашей технической поддержки не консультируют по работе стороннего кода и не дают рекомендаций по внесению изменений в примеры кода из статьи.
- Перед добавлением кода на страницу рекомендуем создать ее копию, добавить на нее код и проверить отображение до и после. После того как вы убедитесь в корректности работы кода, можно добавить его на оригинал страницы.
- Если пример прелоадера, предоставленный в статье, вам не подходит или информации недостаточно для решения задачи, рекомендуем воспользоваться услугой платной верстки от специалистов GetCourse ↓
Как добавить прелоадер на страницу
Добавить прелоадер на страницу могут:
- владелец аккаунта,
- администратор,
- сотрудник с правом «Может управлять CMS».
Для этого перейдите на страницу и добавьте на нее 3 блока из раздела «Вставка»:
- HTML.
- CSS-код.
- Javascript-код.
Важно
Размещать HTML и CSS блоки рекомендуется как можно выше на странице, а JavaScript, наоборот, ниже, после всех остальных блоков
![<p>
Необходимые блоки</p> <p>
Необходимые блоки</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/5de84607e9caddbbdd05b3ba394e9402.png/s/s1200x/a/116/sc/334)
Необходимые блоки
HTML-код отвечает за структуру прелоадера и его добавление на страницу.
CSS-код определяет внешний вид прелоадера (цвет, размер, положение на экране), а также описывает анимацию вращения.
JavaScript отслеживает момент загрузки страницы и скрывает прелоадер по ее завершении.
HTML-код
В блок с HTML добавьте следующий код:
<div id="preloader"> <div class="preloader-animation"></div> </div>
![<p>
HTML-код</p> <p>
HTML-код</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/46060161cc7206c605ed462d3bc4691a.png/s/s1200x/a/116/sc/33)
HTML-код
CSS-код
В блок с CSS добавьте следующий код:
.lt-block:not(.lt-editing) #preloader { position:fixed; top:0; left:0; right:0; bottom:0; background-color: #fff; /* фоновый цвет всей страницы в процессе загрузки */ z-index:999; display: flex; align-items: center; justify-content: center; } .preloader-animation { border: 5px solid #b7cde3; /* толщина круга и его основной цвет*/ border-top-color: #2c3e50; /* цвет яркой части круга */ height: 50px; /* ширина элемента */ width: 50px; /* высота элемента */ animation: rotation 1s linear infinite; /* время одного вращения; можно указать дробное значение, например 0.5s */ border-radius: 50%; } @keyframes rotation { to { transform: rotate(1turn); } }
При необходимости измените внешний вид прелоадера, используя подсказки, выделенные знаками /*...*/
.
![<p>CSS-код</p> <p>CSS-код</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/812d15fa987a71c68151e91f2622523c.png/s/s1200x/a/116/sc/3)
CSS-код
JavaScript-код
В блок JavaScript вставьте следующий код:
$(window).load(function(){ $('#preloader').fadeOut(); });
![<p>JavaScript-код</p> <p>JavaScript-код</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/c297500a9275eb076895e36f6015ec53.png/s/s1200x/a/116/sc/12)
JavaScript-код
Опубликуйте страницу или внесенные изменения.
![<p>
Публикация изменений</p> <p>
Публикация изменений</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/35e3ca6e4a2c2b216184211739a9b89f.png/s/s1200x/a/116/sc/93)
Публикация изменений
Готово! Прелоадер добавлен. Проверить его отображение можно в режиме просмотра страницы.
![<p>
Как перейти в режим просмотра</p> <p>
Как перейти в режим просмотра</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/9f1fdf0e277b12e11a425ab3e364616c.png/s/s1200x/a/116/sc/181)
Как перейти в режим просмотра
Как добавить прелоадер на страницу со «старым» конструктором
Старый конструктор используется в настройках вида тренинга и на системных страницах. Принцип настройки прелоадера здесь аналогичен — потребуется добавить 3 разных кода.
HTML
Чтобы добавить HTML-код в старом конструкторе, используйте соответствующий блок из раздела «Элементы» .
![<p>Добавление блока в старом конструкторе</p>
<p>Добавление блока в старом конструкторе</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/3fd468c405c0c4808ce71d05f57e3b74.png/s/s1200x/a/116/sc/149)
Добавление блока в старом конструкторе
![<p>Блок для HTML-кода</p> <p>Блок для HTML-кода</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/d5a041f0900727122da47d791141fccf.png/s/s1200x/a/116/sc/80)
Блок для HTML-кода
В добавленном блоке нажмите на <>
и вставьте следующий код:
<div id="preloader"> <div class="preloader-animation"></div> </div>
![<p>
Вставленный код</p> <p>
Вставленный код</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/60d8605c281c984b728e40e156c492f4.png/s/s1200x/a/116/sc/12)
Вставленный код
CSS
Чтобы добавить CSS в стили страницы, нажмите на </>
и вставьте следующий код. При необходимости измените внешний вид прелоадера, используя подсказки, выделенные знаками /*...*/
.
.xdget-block:not(.editable) #preloader { position:fixed; top:0; left:0; right:0; bottom:0; background-color: #fff; /* фоновый цвет всей страницы в процессе загрузки */ z-index:999; display: flex; align-items: center; justify-content: center; } .preloader-animation { border: 5px solid #b7cde3; /* толщина круга и его основной цвет*/ border-top-color: #2c3e50; /* цвет яркой части круга */ height: 50px; /* ширина элемента */ width: 50px; /* высота элемента */ animation: rotation 1s linear infinite; /* время одного вращения; можно указать дробное значение, например 0.5s */ border-radius: 50%; } @keyframes rotation { to { transform: rotate(1turn); } }
![<p>
Стили страницы</p> <p>
Стили страницы</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/a33c12d51814dac7eff6f5f3da45a04a.png/s/s1200x/a/116/sc/322)
Стили страницы
JavaScript-код
Чтобы добавить JavaScript, в конце страницы вставьте соответствующий блок из раздела «Элементы».
![<p>Как добавить блок</p>
<p>Как добавить блок</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/bab29881e0ac6bde9fef61f0ae69fceb.png/s/s1200x/a/116/sc/23)
Как добавить блок
![<p>Блок для JavaScript-кода</p> <p>Блок для JavaScript-кода</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/c6f55dd7644c99c2cd0114116d2259c5.png/s/s1200x/a/116/sc/99)
Блок для JavaScript-кода
Кликните 2 раза на добавленный блок и вставьте следующий код:
$(window).load(function(){ $('#preloader').fadeOut(); });
![<p>
JavaScript</p> <p>
JavaScript</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/3b8d09115bad9fe0e5677df537ef7fab.png/s/s1200x/a/116/sc/350)
JavaScript
Готово! Прелоадер добавлен. Сохраните настройки страницы и проверьте отображение прелоадера в режиме просмотра страницы.
![<p>Как перейти к просмотру страницы</p> <p>Как перейти к просмотру страницы</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/e8af177075f083bba2c69d8f90e9224a.png/s/s1200x/a/116/sc/203)
Как перейти к просмотру страницы
Как добавить прелоадер на все страницы аккаунта
Чтобы вставить прелоадер на все страницы аккаунта, необходимо добавить код в настройках аккаунта.
Доступ к данному разделу имеют:
- владелец аккаунта,
- ответственный администратор.
Для добавления кода:
- Перейдите в раздел «Профиль» — «Настройки аккаунта» — «Настройки».
![<p>
Как перейти в настройки аккаунта</p> <p>
Как перейти в настройки аккаунта</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/4629a8815c7cd2b113da7dd1a3ea6a13.png/s/s1200x/a/116/sc/224)
Как перейти в настройки аккаунта
- Вставьте весь следующий код в блок «Дополнительные теги для HEAD»:
<style> #preloader { position:fixed; top:0; left:0; right:0; bottom:0; background-color: #fff; z-index:999; display: flex; align-items: center; justify-content: center; } .preloader-animation { animation: rotation 1s linear infinite; border: 5px solid #b7cde3; border-radius: 50%; border-top-color: #2c3e50; height: 50px; width: 50px; } @keyframes rotation { to { transform: rotate(1turn); } } </style> <div id="preloader"> <div class="preloader-animation"> </div> </div> <script> $(window).load(function(){ $('#preloader').fadeOut(); }); </script>
![<p>Дополнительные теги для HEAD</p> <p>Дополнительные теги для HEAD</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/291e1e3377594925d52045f514e5c4cb.png/s/s1200x/a/116/sc/7)
Дополнительные теги для HEAD
- Сохраните настройки в конце страницы.
Важно
- В целях безопасности сторонний код не применяется к некоторым системным страницам. Со списком страниц-исключений можно ознакомиться в статье → «Общие настройки аккаунта».
- Если вы вставили код в настройках аккаунта, не добавляйте дополнительный код на отдельные страницы. Это может привести к ошибкам и некорректному отображению страницы.
Еще больше информации о верстке можно найти в следующей статье → «Оформление стилей элемента с кастомным классом».
авторизуйтесь