fix(gatsby-plugin-image): Make onLoad callback work on first load (#3…

…6375)
gatsbyjs · Aug 12, 2022 · 3dfc1ec · 3dfc1ec
1 parent 8bad1a7
commit 3dfc1ec
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -122,12 +122,13 @@ const GatsbyImageHydrator: FC<GatsbyImageProps> = function GatsbyImageHydrator({
           ssrImage.removeAttribute(`data-gatsby-image-ssr`)
         }, 0)
       } else {
-        document.addEventListener(`load`, function onLoadListener() {
-          document.removeEventListener(`load`, onLoadListener)
+        onStartLoad?.({
+          wasCached: true,
+        })
+
+        ssrImage.addEventListener(`load`, function onLoadListener() {
+          ssrImage.removeEventListener(`load`, onLoadListener)
 
-          onStartLoad?.({
-            wasCached: true,
-          })
           onLoad?.({
             wasCached: true,
           })