☰

Isomorphic/universal react の画像 onLoad イベント - 画像が読み込まれた後にイベントを登録する 質問する

tag-icon • tag-icon javascript reactjs isomorphic-javascript
Isomorphic/universal react の画像 onLoad イベント - 画像が読み込まれた後にイベントを登録する 質問する

等形レンダリングされたページでは、メイン ファイルの前に画像をダウンロードできます。したがって、登録イベントscript.jsの前に画像が既に読み込まれている可能性があります。このイベントはトリガーされません。reactonLoad

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 は script.js より大きいです

このシナリオでは、すべてが正常に動作しています。画像が最終的に読み込まれる前にイベントが登録されるため、コンソールにimage loadedメッセージが表示されます。

シナリオ2 -image.jpgより小さいscript.js

image.jpg は script.js より小さいです

このシナリオでは、投稿の冒頭で説明した問題を確認できます。onLoadイベントはトリガーされません。

質問

onLoadイベントをトリガーするにはどうすればいいですか？シナリオ2?

編集: Soviut 回答の実装

レンダリング時に画像の準備ができているかどうかを検出するには、complete純粋な JavaScriptimgオブジェクトのプロパティを確認する必要があります。

constructor(props) {
    super(props);
    this.state = { loaded: false };
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
    this.image = React.createRef();
}

componentDidMount() {
    const img = this.image.current;
    if (img && img.complete) {
        this.handleImageLoaded();
    }
}

handleImageLoaded() {
    if (!this.state.loaded) {
        console.log('image loaded');
        this.setState({ loaded: true });
    }
} 

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

ベストアンサー1

completeイベントを適用する前に、画像のプロパティを確認できますonload。

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

おすすめ記事