Иногда сайт или приложение загружаются с такой скоростью, что белый экран монитора и “вечное” ожидание прогрузки способны вывести из состояния равновесия кого угодно.
Причин у этого может быть множество, но основные две:
- неоптимизированное содержимое страницы;
- медленная скорость соединения у пользователя.
Чтобы не вызывать у посетителя негативные эмоции о ресурсе, дизайнеры и разработчики пошли на ухищрение - создали скелетный экран загрузки.
Скелетная загрузка - это появление на экране плейсхолдеров нейтрального цвета, чаще всего светло-серого, на месте которого, по завершению загрузки появится контент.
По данным исследования продуктового дизайнера компании "Clio" Билла Чанга, скелетная загрузка используется, чтобы дать понять пользователю, что страница загружается. В сравнении с пустым экраном и спиннером она создаёт иллюзию более быстрой загрузки страниц.
Как создать скелетный экран загрузки
Анимировать загрузку страницы будем через добавление класса skeleton к элементам, которые нужно анимировать. Стили для этого класса
Если использовать только CSS, то анимация загрузки страницы будет бесконечно повторяться, поэтому нам нужен JS файл для удаления стиля skeleton.
На тестовой странице он выглядит следующим образом:
Так как страница из-за малого веса загружается за доли секунд, я поставил таймер, который будет удалять необходимый мне стиль. Вы же можете сделать так, чтобы стиль удалялся по завершению загрузки всего контента.
Финальный результат выглядит следующим образом:
Скелетная загрузка - это не сложный в создании, но эффективный приём улучшения восприятия вашего ресурса пользователями. Обязательно попробуйте его и делитесь своими показателями в комментариях.
Файл с примером можно скачать - тут.