ensure onload is called (#1223)

* ensure onload is called

* fix

packages/gallery/src/components/item/imageRenderer.js

@@ -1,43 +1,64 @@
 import React from 'react';
 import { PrintOnlyImageSource } from './printOnlySource';
-
-const ImageRenderer = (props) => {
-  const { customImageRenderer, ...imageProps } = props; // customImageRenderer is not valid for dom elements.
-  if (typeof customImageRenderer === 'function') {
-    return customImageRenderer(props);
-  } else if (typeof props.src === 'string') {
-    return <img alt={props.alt} {...imageProps} />;
-  } else if (typeof props.src === 'object') {
-    return (
-      <picture
-        id={`multi_picture_${props.id}`}
-        key={`multi_picture_${props.id}`}
-      >
-        {props.src.map((src, index) =>
-          src.forPrinting ? (
-            <PrintOnlyImageSource
-              key={`print-only-image-${index}`}
-              srcSet={src.dpr}
-              type={`image/${src.type}`}
-            />
-          ) : (
-            <source
-              key={`image-source-${index}`}
-              srcSet={src.dpr || src.url}
-              type={`image/${src.type}`}
-            />
-          )
-        )}
+class ImageRenderer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.imageRef = null;
+  }
+  componentDidMount() {
+    if (this.imageRef?.complete && typeof this.props.onLoad === 'function') {
+      this.props.onLoad();
+    }
+  }
+  render() {
+    const { customImageRenderer, ...imageProps } = this.props; // customImageRenderer is not valid for dom elements.
+    if (typeof customImageRenderer === 'function') {
+      return customImageRenderer(this.props);
+    } else if (typeof this.props.src === 'string') {
+      return (
         <img
-          alt={props.alt}
+          ref={(ref) => {
+            this.imageRef = ref;
+          }}
+          alt={this.props.alt}
           {...imageProps}
-          src={props.src[props.src.length - 1].url}
         />
-      </picture>
-    );
-  } else {
-    return null;
+      );
+    } else if (typeof this.props.src === 'object') {
+      return (
+        <picture
+          id={`multi_picture_${this.props.id}`}
+          key={`multi_picture_${this.props.id}`}
+        >
+          {this.props.src.map((src, index) =>
+            src.forPrinting ? (
+              <PrintOnlyImageSource
+                key={`print-only-image-${index}`}
+                srcSet={src.dpr}
+                type={`image/${src.type}`}
+              />
+            ) : (
+              <source
+                key={`image-source-${index}`}
+                srcSet={src.dpr || src.url}
+                type={`image/${src.type}`}
+              />
+            )
+          )}
+          <img
+            ref={(ref) => {
+              this.imageRef = ref;
+            }}
+            alt={this.props.alt}
+            {...imageProps}
+            src={this.props.src[this.props.src.length - 1].url}
+          />
+        </picture>
+      );
+    } else {
+      return null;
+    }
   }
-};
+}
 
 export default ImageRenderer;