Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(gatsby-remark-images): Add support for native lazy loading #16448

Merged
merged 9 commits into from
Aug 11, 2019
Merged

feat(gatsby-remark-images): Add support for native lazy loading #16448

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c374faa
Add lazy option
Aug 7, 2019
7115433
update readme
Aug 7, 2019
808d41b
Add lazy as default
Aug 7, 2019
da9420b
update snapshot
Aug 7, 2019
7a02a64
Add warning for invalid values for loading
sidharthachatterjee Aug 11, 2019
a68ab54
Forgot to update root yarn.lock
sidharthachatterjee Aug 11, 2019
4a5c047
Merge remote-tracking branch 'upstream/master' into topics/gatsby-rem…
Aug 11, 2019
c8aa4a1
Update snapshot
sidharthachatterjee Aug 11, 2019
4dccab8
Merge remote-tracking branch 'upstream/master' into topics/gatsby-rem…
Aug 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/gatsby-remark-images/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ plugins: [
| `quality` | `50` | The quality level of the generated files. |
| `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. Pass `true` for default support, or an object of options to specifically override those for the WebP files. For example, pass `{ quality: 80 }` to have the WebP images be at quality level 80. |
| `tracedSVG` | `false` | Use traced SVGs for placeholder images instead of the "blur up" effect. Pass `true` for traced SVGs with the default settings (seen [here][3]), or an object of options to override the defaults. For example, pass `{ color: "#F00", turnPolicy: "TURNPOLICY_MAJORITY" }` to change the color of the trace to red and the turn policy to TURNPOLICY_MAJORITY. See [`node-potrace` parameter documentation][4] for a full listing and explanation of the available options. |
| `loading` | `lazy` | Set the browser's native lazy loading attribute. One of `lazy`, `eager` or `auto`. |
muescha marked this conversation as resolved.
Show resolved Hide resolved

## dynamic wrapperStyle example

Expand Down
22 changes: 18 additions & 4 deletions packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ exports[`it handles goofy nesting properly 1`] = `
src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\"
srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</span>"
`;
Expand All @@ -36,6 +37,7 @@ exports[`it leaves images that are already linked alone 1`] = `
src=\\"not-a-real-dir/image/my-image.jpg\\"
srcset=\\"not-a-real-dir/image/my-image.jpg, not-a-real-dir/image/my-image.jpg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</span>"
`;
Expand All @@ -44,23 +46,23 @@ exports[`it leaves linked HTML img tags alone 1`] = `
"<a href=\\"https://example.org\\">
<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\">
<span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
<img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
<img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" loading=\\"lazy\\">
</span>
</a>"
`;

exports[`it leaves single-line linked HTML img tags alone 1`] = `
"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\">
<span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
<img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
<img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" loading=\\"lazy\\">
</span>"
`;

exports[`it transforms HTML img tags 1`] = `
"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\">
<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
<span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
<img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
<img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" loading=\\"lazy\\">
</a>
</span>"
`;
Expand All @@ -69,7 +71,7 @@ exports[`it transforms HTML img tags with query strings 1`] = `
"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px;\\">
<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
<span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
<img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
<img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" loading=\\"lazy\\">
</a>
</span>"
`;
Expand Down Expand Up @@ -97,6 +99,7 @@ exports[`it transforms image references in markdown 1`] = `
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>"
Expand Down Expand Up @@ -125,6 +128,7 @@ exports[`it transforms images in markdown 1`] = `
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>"
Expand Down Expand Up @@ -153,6 +157,7 @@ exports[`it transforms images in markdown with query strings 1`] = `
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>"
Expand Down Expand Up @@ -181,6 +186,7 @@ exports[`it uses tracedSVG placeholder when enabled 1`] = `
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>"
Expand Down Expand Up @@ -210,6 +216,7 @@ exports[`showCaptions display alt as caption if specified first in showCaptions
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>
Expand Down Expand Up @@ -241,6 +248,7 @@ exports[`showCaptions display alt as caption if specified in showCaptions array
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>
Expand Down Expand Up @@ -272,6 +280,7 @@ exports[`showCaptions display alt as caption if title was not found and showCapt
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>
Expand Down Expand Up @@ -303,6 +312,7 @@ exports[`showCaptions display title as caption if specified first in showCaption
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>
Expand Down Expand Up @@ -334,6 +344,7 @@ exports[`showCaptions display title as caption if specified in showCaptions arra
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>
Expand Down Expand Up @@ -365,6 +376,7 @@ exports[`showCaptions display title as caption when showCaptions === true 1`] =
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>
Expand Down Expand Up @@ -396,6 +408,7 @@ exports[`showCaptions fallback to alt as caption if specified second in showCapt
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>
Expand Down Expand Up @@ -427,6 +440,7 @@ exports[`showCaptions fallback to title as caption if specified second in showCa
src=\\"not-a-real-dir/images/my-image.jpeg\\"
srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
sizes=\\"(max-width: 650px) 100vw, 650px\\"
loading=\\"lazy\\"
/>
</a>
</span>
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-remark-images/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ exports.DEFAULT_OPTIONS = {
showCaptions: false,
withWebp: false,
tracedSVG: false,
loading: `lazy`,
}

exports.imageClass = `gatsby-resp-image-image`
Expand Down
4 changes: 4 additions & 0 deletions packages/gatsby-remark-images/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ module.exports = (

const title = node.title ? node.title : alt

const loading = options.loading

// Create our base image tag
let imageTag = `
<img
Expand All @@ -164,6 +166,7 @@ module.exports = (
src="${fallbackSrc}"
srcset="${srcSet}"
sizes="${fluidResult.sizes}"
loading="${loading}"
/>
`.trim()

Expand Down Expand Up @@ -202,6 +205,7 @@ module.exports = (
src="${fallbackSrc}"
alt="${alt}"
title="${title}"
loading="${loading}"
/>
</picture>
`.trim()
Expand Down