How to use the onLoad event?

[bearsworth]

Is it possible to trigger the onLoad event somehow? We're trying to put a spinner for larger images, but am unable to figure out how to implement this event on the component.

Thanks.

[explaingarlic]

Had the same issue, the way you do this is with the imgAttributes prop.

My example:

// me using my component...
<LazyInnerZoomImage
  src={`https://mysite.pl${activeImage}`}
  zoomSrc={activeImage}
  imgAttributes={{
    className: "rounded-[20px]",
    style: {
      objectFit: "contain",
      width: "100%",
      height: "100%",
    },
  }}
  hasSpacer={false}
  hideCloseButton
  zoomPreload
/>

that component looks like this:

export function LazyInnerZoomImage({ ...props } : InnerImageZoomProps) {
    const [isLoaded, setIsLoaded] = useState(false);
    const [isError, setIsError] = useState(false);

    return (
        <>
        {!isLoaded && !isError && <LoadingIcon className="text-black mt-4 ms-4"/>}
        <InnerImageZoom
            {...props}
            imgAttributes={{
                onLoad: () => setIsLoaded(true),
                onError: () => setIsError(true)
            }}
        />
        </>
    )
}

hope that helps :-)