等形レンダリングされたページでは、メイン ファイルの前に画像をダウンロードできます。したがって、登録イベントscript.js
の前に画像が既に読み込まれている可能性があります。このイベントはトリガーされません。react
onLoad
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 loaded
メッセージが表示されます。
シナリオ2 -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
}