Создание неблокирующего загрузчика страниц

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

Существует огромное количество сниппетов и руководств по созданию загрузчиков, но иногда они ужасны с точки зрения доступности.

Вы можете сказать, что не стоит даже добавлять такой анимированный экран, но давайте сделаем это. Прогрессивный подход, вероятно, должен учитывать несколько случаев, таких как:

  • люди, которые отключают JavaScript
  • люди, которые уменьшают количество движений
  • все остальные люди

Хотя этого не так уж сложно добиться, многие сайты не утруждают себя этим, и, на мой взгляд, это немного неубедительно.

Что мне нравится делать, так это

  1. скрывать анимированный экран по умолчанию
  2. отображение анимации только в том случае, если у пользователя нет предпочтений по движению: @media (prefers-reduced-motion: no-preference) {}
  3. удаление экрана через несколько секунд с помощью JavaScript

Имейте в виду, я не претендую на то, что это лучший подход, но он, по крайней мере, работает.

Возможно, вы можете пойти еще дальше и предоставить посетителям возможность выбора, например:

отключить надоедливый экран загрузки? y/n

Оцените статью
Procodings.ru
Добавить комментарий