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

Мы не хотим, чтобы это изображение загружалось на нашем веб-сайте отдельными частями, мы хотим, чтобы текст «Загрузка…» отображался до тех пор, пока изображение не было полностью загружено, а затем, наконец, отображалось изображение. Что ж, существует множество библиотек для этого через npm, но мы собираемся решить эту проблему с помощью самого React, используя мощное событие onLoad и немного логики.

Мы собираемся создать функциональный компонент под названием LoadableImage, который принимает свойство imageURL от родительского компонента и имеет для переменной состояния под названием loaded изначально установлено значение false.

Теперь загвоздка !, нам нужна функция изображения onLoad, чтобы проверить, было ли изображение загружено полностью или нет. Но ждать! мы не будем показывать загружаемое изображение, установив для него стиль {{display: 'none'}}, вместо этого мы просто будем использовать событие onLoad. в теме. Здесь :

Что же это за / * сделать что-нибудь * / будет? Вы получили это, установив для переменной состояния загружено значение true.

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

Если бы я сформулировал приведенную выше логику в простейшей форме, это было бы так:

Если загружено - истинно, то показать изображение (тег img), иначе отобразить текст "Загрузка .." (тег p).

Посмотрите, что здесь делает {{maxWidth:‘ 100% ’}}.

Все сделано! Теперь давайте посмотрим, как визуализировать этот компонент LoadableImage из родительского компонента, передав ему свойство imageURL.

И давайте посмотрим на результат ниже в виде гифки:

Итак, у нас есть высококачественные изображения, загружаемые за один раз. Теперь о доработках:

  • Вместо текста «Загрузка…» можно использовать красивый счетчик.
  • Когда вы откроете инструменты chrome dev для вышеуказанного приложения, вы увидите там два тега изображений (см. Различные атрибуты alt, которые я использовал выше). Найдите способ удалить этот первый тег изображения (теперь избыточный) после отображения изображения.
  • Используйте хороший класс анимации со вторым тегом изображения (image_actual), чтобы представить его очень красиво. См. Первый пример в этой статье и измените его для свойства opacity CSS.

Все изображения для тестирования взяты из unsplash API здесь. гифки, созданные с помощью giphy.

Дайте мне знать, если вы хотите поделиться другими интересными вещами / шаблонами React, по электронной почте [email protected]. Мне нравится иногда поиграть с JS и CSS в JSFiddle.