Событие Image onLoad в изоморфном / универсальном событии react-register после загрузки изображения

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

script.js

constructor(props) {
    super(props);
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
}

handleImageLoaded() {
    console.log('image loaded');
} 

render() {
    return (
        <img src='image.jpg' onLoad={this.handleImageLoaded} />
    );
}

Сценарий 1 - image.jpg больше, чем script.js

image.jpg is bigger than script.js

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

Сценарий 2 - image.jpg меньше, чем script.js

image.jpg is smaller than script.js

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

вопрос

что я могу сделать, чтобы вызвать onLoad событие сценарий 2?

EDIT: реализация ответа Soviut

чтобы обнаружить, если изображение готов на рендеринг вам стоит проверить complete свойство на чистом javascript

10
isomorphic-javascript javascript reactjs

3 ответов

вы можете проверить complete свойство на изображении перед применением onload событие.

if (!img.complete) {
    // add onload listener here
}
11

другой способ-использовать ref и охватить оба сценария:

<img
  ref={(input) => {
    // onLoad replacement for SSR
    if (!input) { return; }
    const img = input;

    const updateFunc = () => {
      this.setState({ loaded: true });
    };
    img.onload = updateFunc;
    if (img.complete) {
      updateFunc();
    }
  }}
  src={imgSrc}
  alt={imgAlt}
/>
2
<img
    src={this.props.imageUrl}
    onLoad={this.handleImageLoaded.bind(this)}
    onError={this.handleImageErrored.bind(this)}
/>
-1