反応レンダリングされた画像がロードされたときの検出

Question

私は、カスタマイズされた画像をレンダリングするためのReactコンポーネントを持っています。簡略化した形で、それは次のようになります。

function MyImage(props) { 
    return <img src={props.src} onLoad={props.onLoad} /> 
} 

Webページでは、サーバーレンダリングReactDOMServerであると<img>要素は、（意図的に）すでに初期のHTMLドキュメントに存在しています。ただし、そのonLoadイベントハンドラはではなく、です。私はそれがの機能のReactDOMServerと信じています。

何時々起こることができるにはJavaScriptがロードされている前またはそれが実行を開始するか、少なくとも前onLoadイベントハンドラアップセットに反応する前にカスタマイズされた画像の一部、特に小さいものは、ロードを終えることができるということです。その結果、これらのイメージ上のonLoadイベントは、イベントハンドラを呼び出さないようにします。

基礎となるイメージのロードが完了した後、反応させ、レンダリング<img>要素内に設置されているonLoadイベントハンドラは、常にが呼び出されることを確実にする方法はありますか？

私の最も重要な制約は、私が使用したいということです反応して、サーバーレンダリングされたHTMLページが正しく設定さそのsrc属性を持つ<img>要素を含まれている必要があります。

Answer 1

onLoadハンドラーをcomponentDidMount()メソッドに移動することができます。 docs