feat(gatsby-remark-images-contentful): add native lazy loading support to contentful images (#18883)

Author: jdcataldo

packages/gatsby-remark-images-contentful/README.md

@@ -53,6 +53,7 @@ plugins: [
 | `wrapperStyle`         |         | Add custom styles to the div wrapping the responsive images. Use regular CSS syntax, e.g. `margin-bottom:10px; background: red;`                                                                                                                                                                                                                                                                                                         |
 | `backgroundColor`      | `white` | Set the background color of the image to match the background of your design                                                                                                                                                                                                                                                                                                                                                             |
 | `withWebp`             | `false` | Additionally generate WebP versions alongside your chosen file format. They are added as a srcset with the appropriate mimetype and will be loaded in browsers that support the format.                                                                                                                                                                                                                                                  |
+| `loading`              | `lazy`  | Set the browser's native lazy loading attribute. One of `lazy`, `eager` or `auto`.                                                                                                                                                                                                                                                                                                                                                       |
 
 ## Troubleshooting
 

packages/gatsby-remark-images-contentful/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@babel/runtime": "^7.7.2",
     "axios": "^0.19.0",
+    "chalk": "^2.4.2",
     "cheerio": "^1.0.0-rc.3",
     "is-relative-url": "^3.0.0",
     "lodash": "^4.17.15",

packages/gatsby-remark-images-contentful/src/__tests__/__snapshots__/index.js.snap

@@ -4,7 +4,7 @@ exports[`it transforms HTML img tags 1`] = `
 "<a class=\\"gatsby-resp-image-link\\" href=\\"https://images.ctfassets.net/rocybtov1ozk/wtrHxeu3zEoEce2MokCSi/73dce36715f16e27cf5ff0d2d97d7dff/quwowooybuqbl6ntboz3.jpg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
           <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; ; max-width: 600px; margin-left: auto; margin-right: auto;\\">
         <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image;&apos;); background-size: cover; display: block;\\">
-          <img class=\\"gatsby-resp-image-image\\" style=\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\" alt=\\"quwowooybuqbl6ntboz3\\" title src=\\"https://images.ctfassets.net/rocybtov1ozk/wtrHxeu3zEoEce2MokCSi/73dce36715f16e27cf5ff0d2d97d7dff/quwowooybuqbl6ntboz3.jpg\\" srcset=\\"srcSet\\" sizes=\\"128px,250px\\">
+          <img class=\\"gatsby-resp-image-image\\" style=\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\" alt=\\"quwowooybuqbl6ntboz3\\" title src=\\"https://images.ctfassets.net/rocybtov1ozk/wtrHxeu3zEoEce2MokCSi/73dce36715f16e27cf5ff0d2d97d7dff/quwowooybuqbl6ntboz3.jpg\\" srcset=\\"srcSet\\" sizes=\\"128px,250px\\" loading=\\"lazy\\">
         </span>
       </span>
         </a>"
@@ -34,6 +34,7 @@ exports[`it transforms images in markdown 1`] = `
         src=\\"https://images.ctfassets.net/rocybtov1ozk/wtrHxeu3zEoEce2MokCSi/73dce36715f16e27cf5ff0d2d97d7dff/quwowooybuqbl6ntboz3.jpg\\"
         srcset=\\"srcSet\\"
         sizes=\\"128px,250px\\"
+        loading=\\"lazy\\"
       />
         </span>
       </span>
@@ -72,6 +73,7 @@ exports[`it transforms images in markdown with webp srcSets if option is enabled
             alt=\\"image\\"
             title=\\"\\"
             src=\\"https://images.ctfassets.net/rocybtov1ozk/wtrHxeu3zEoEce2MokCSi/73dce36715f16e27cf5ff0d2d97d7dff/quwowooybuqbl6ntboz3.jpg\\"
+            loading=\\"lazy\\"
           />
         </picture>
         </span>
@@ -103,6 +105,7 @@ exports[`it transforms images with a https scheme in markdown 1`] = `
         src=\\"https://images.ctfassets.net/rocybtov1ozk/wtrHxeu3zEoEce2MokCSi/73dce36715f16e27cf5ff0d2d97d7dff/quwowooybuqbl6ntboz3.jpg\\"
         srcset=\\"srcSet\\"
         sizes=\\"128px,250px\\"
+        loading=\\"lazy\\"
       />
         </span>
       </span>

packages/gatsby-remark-images-contentful/src/index.js

@@ -4,6 +4,7 @@ const axios = require(`axios`)
 const _ = require(`lodash`)
 const Promise = require(`bluebird`)
 const cheerio = require(`cheerio`)
+const chalk = require(`chalk`)
 const { buildResponsiveSizes } = require(`./utils`)
 
 // If the image is hosted on contentful
@@ -34,6 +35,7 @@ module.exports = async (
     showCaptions: false,
     pathPrefix,
     withWebp: false,
+    loading: `lazy`,
   }
 
   // This will only work for markdown syntax image tags
@@ -97,6 +99,18 @@ module.exports = async (
     const fileNameNoExt = fileName.replace(/\.[^/.]+$/, ``)
     const defaultAlt = fileNameNoExt.replace(/[^A-Z0-9]/gi, ` `)
 
+    const loading = options.loading
+
+    if (![`lazy`, `eager`, `auto`].includes(loading)) {
+      reporter.warn(
+        reporter.stripIndent(`
+        ${chalk.bold(loading)} is an invalid value for the ${chalk.bold(
+          `loading`
+        )} option. Please pass one of "lazy", "eager" or "auto".
+      `)
+      )
+    }
+
     // Create our base image tag
     let imageTag = `
       <img
@@ -109,6 +123,7 @@ module.exports = async (
         src="${fallbackSrc}"
         srcset="${srcSet}"
         sizes="${responsiveSizesResult.sizes}"
+        loading="${loading}"
       />
    `.trim()
 
@@ -133,6 +148,7 @@ module.exports = async (
             alt="${node.alt ? node.alt : defaultAlt}"
             title="${node.title ? node.title : ``}"
             src="${fallbackSrc}"
+            loading="${loading}"
           />
         </picture>
       `.trim()