Реагировать на событие img onLoad не работает должным образом

Question

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

Загрузка небольшого размера -> Установить фон, начать выборку носителя -> Загрузка носителя -> Установить фон, начать выборку большого размера

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

Согласно этой статье это должно быть так просто:

<img src={image} alt="" onLoad={console.log('LOADED')}/>

И я должен увидеть LOADED сообщение после изображение полностью загружено клиентом.

Этого не происходит.

Я что-то упустил?

Заранее спасибо!

EDIT: сообщение LOADED появляется при монтировании компонента.

Answer 1

Проблема

Вам не хватает выражения лямбда . Прямой вызов функции вызовет console.log(), как только будет смонтирован компонент. Это распространенное заблуждение, связанное с синтаксисом.

Что происходит

Функция

onLoad={console.log('LOADED')} вызывается, как только компонент монтируется, поскольку вы на самом деле вызываете console.log, а не просто устанавливаете, какой function должен вызываться при запуске события, в данном случае onLoad.

Как это исправить

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

<img src={image} alt="" onLoad={() => console.log('LOADED')}/>

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

<img onLoad={(event) => this.myHandleImageLoadEvent(event)} />

Где функция myHandleImageLoadEvent является функцией, определенной в том же классе, и имеет событие в качестве входного параметра.