perf(gatsby-plugin-image): Handle disabled js, and add preload link (#…

…28669) * perf(gatsby-plugin-image): Handle disabled js, and add preload link * Update packages/gatsby-plugin-image/src/components/main-image.tsx Co-authored-by: Ward Peeters <[email protected]> Co-authored-by: Ward Peeters <[email protected]>
gatsbyjs · Dec 17, 2020 · 8300236 · 8300236
1 parent 9dbd02b
commit 8300236
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/main-image.tsx b/packages/gatsby-plugin-image/src/components/main-image.tsx
@@ -5,7 +5,26 @@ export type MainImageProps = PictureProps
 
 export const MainImage = forwardRef<HTMLImageElement, MainImageProps>(
   function MainImage({ ...props }, ref) {
-    return <Picture ref={ref} {...props} />
+    return (
+      <>
+        {props.loading === `eager` && (
+          <link
+            rel="preload"
+            as="image"
+            href={props.fallback.src}
+            // TODO: remove this if imagesrcset is added to the types
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            imagesrcset={props.fallback.srcSet}
+            imagesizes={props.fallback.sizes}
+          />
+        )}
+        <Picture ref={ref} {...props} />
+        <noscript>
+          <Picture {...props} shouldLoad={true} />
+        </noscript>
+      </>
+    )
   }
 )
 

diff --git a/packages/gatsby-plugin-image/src/gatsby-ssr.tsx b/packages/gatsby-plugin-image/src/gatsby-ssr.tsx
@@ -44,9 +44,13 @@ export function onRenderBody({ setHeadComponents }: RenderBodyArgs): void {
       dangerouslySetInnerHTML={generateHtml(
         `<style>` +
           cssNanoMacro`
-  .gatsby-image-wrapper [data-main-image] {
+  .gatsby-image-wrapper noscript [data-main-image] {
     opacity: 1 !important;
-  }` +
+  }
+  .gatsby-image-wrapper [data-placeholder-image] {
+    opacity: 0 !important;
+  }
+  ` +
           `</style>`
       )}
     />,