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

1. Событие onLoadизображения. Вы можете прикрепить обработчик событий onLoadк элементу . Когда изображение завершит загрузку, сработает обработчик событий, позволяющий выполнить необходимые действия.

<img src="image.jpg" onLoad={handleImageLoad} />
// Event handler
const handleImageLoad = () => {
  // Image has finished loading
};

2. Классы CSS. Вы можете определить класс CSS, который применяет к изображению цвет фона или индикатор загрузки. Изначально изображение будет иметь этот класс, и как только изображение загрузится, вы сможете удалить этот класс.

<img src="image.jpg" className={isLoading ? 'loading' : ''} />
// CSS class
.loading {
  background-color: lightgray;
}

3. Состояние React: вы можете использовать состояние React, чтобы отслеживать статус загрузки изображения. Установите начальное состояние «загрузка» и обновите его до «загружено», когда изображение завершит загрузку.

const [isImageLoaded, setIsImageLoaded] = useState(false);
// In the render method
<img src="image.jpg" onLoad={() => setIsImageLoaded(true)} />
// Usage
if (isImageLoaded) {
  // Image has finished loading
} else {
  // Image is still loading
}

4. API Intersection Observer: API Intersection Observer можно использовать для определения момента входа изображения в область просмотра. Этот метод позволяет выполнять действия, когда изображение находится в поле зрения пользователя, что означает, что оно завершило загрузку.

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