Руководство по реализации прогрессивной загрузки изображений в React.

Изображения являются важной частью любого веб-сайта, они могут улучшить или испортить взаимодействие с пользователем в зависимости от того, как они реализованы. Загрузка высококачественных изображений может занять много времени, что отрицательно скажется на пользовательском опыте. Чтобы решить эту проблему, нам нужен какой-то механизм загрузки, который, в отличие от спиннеров, будет эстетически приятен пользователям.

Введите прогрессивную загрузку.

Итак, мы можем пойти от этого:

Если для рендеринга изображения требуется некоторое время, к этому:

Реализовать его относительно просто и можно выполнить с помощью следующих шагов:

  • Отрисовка изображения-заполнителя.
  • Загрузите исходное изображение в фоновом режиме.
  • Визуализируйте изображение вместо заполнителя после его загрузки.

Для изображения-заполнителя вам понадобится уменьшенная версия вашего исходного изображения, желательно ≤ 2 КБ, вы можете поэкспериментировать, уменьшая его размеры и качество, пока не достигнете этого размера.

Итак, давайте начнем с создания пользовательского компонента, который выполняет описанные выше шаги.

Создание пользовательского компонента изображения

Нам нужен компонент, который получает эти свойства:

  • Источник изображения
  • Источник изображения для предварительного просмотра (заполнитель)
  • Ширина
  • Высота

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

Нам нужен эффект, который загружает исходное изображение, а затем помещает его в наше состояние после завершения загрузки.

Теперь давайте посмотрим на наш компонент:

Мы также применяем собственный стиль к нашему изображению, который размывает его при использовании заполнителя и удаляет размытие при размещении исходного изображения. И анимация перехода, чтобы сгладить изменение размытия.

Вы можете настроить размытие в: blue(5px) и продолжительность анимации в: filter 0.1s ease-out на значения, которые вам подходят.

Использование нашего пользовательского компонента

Теперь все, что осталось, — это импортировать наш компонент туда, где нам нужно его использовать, и передать наше изображение, заполнитель, ширину и высоту.

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

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn и Discord.