Erkennen, wenn ein reaktiviertes Bild geladen wird

Question

Ich habe eine React-Komponente zum Rendern von benutzerdefinierten Bildern. In einer vereinfachten Form, sieht es wie folgt aus:

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

Die Webseite ist server gemacht, indem ReactDOMServer und die <img> Elemente sind (absichtlich) bereits in der Anfangs HTML-Dokument. Ihre onLoad Event-Handler sind jedoch nicht. Ich glaube, das ist ein Feature von ReactDOMServer.

manchmal Was passieren kann, ist, dass einige der kundenspezifischen Bilder, vor allem die kleineren, Lade vor beenden JavaScript geladen wird oder bevor es beginnt zu laufen oder zumindest vor setzt die onLoad Event-Handler Reagieren auf. Daher verursachen die onLoad Ereignisse in diesen Bildern keine Ereignishandler, die aufgerufen werden.

Gibt es eine Möglichkeit, um sicherzustellen, dass die onLoad Event-Handler, die innerhalb von React-rendered <img> Elementen aufgebaut sind, werden immer aufgerufen werden, nachdem die zugrunde liegenden Bilder Laden beenden?

Meine wichtigsten Einschränkungen sind, dass ich die <img> Elemente enthalten muss, verwenden möchte mit ihre src Attributen richtig eingestellt Reagieren und die Server-gerenderte HTML-Seite.

Answer 1

Sie können Ihre onLoad Handler auf die componentDidMount() Methode verschieben. Siehe docs