カスタマイズされた画像をレンダリングするための React コンポーネントがあります。簡略化した形式では、次のようになります。
function MyImage(props) {
return <img src={props.src} onLoad={props.onLoad} />
}
Web ページは によってサーバーでレンダリングされReactDOMServer、<img>要素は (意図的に) 最初の HTML ドキュメントに既に存在しています。ただし、それらのonLoadイベント ハンドラは. の特徴だと思いますReactDOMServer。
カスタマイズされた画像の一部、特に小さい画像の読み込みが、JavaScript が読み込まれる前、実行が開始される前、または少なくとも React がイベント ハンドラーを設定する前に完了することがありonLoadます。その結果、onLoadこれらのイメージのイベントによってイベント ハンドラーが呼び出されることはありません。
React でレンダリングされた要素onLoad内に設定されたイベント ハンドラーが、基になる画像の読み込みが完了した後に常に呼び出されるようにする方法はありますか?<img>
私の最も重要な制約は、React を使用したいということと、サーバーでレンダリングされる HTML ページに、属性が正しく設定された<img>要素を含める必要があることです。src