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.

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

feat(gatsby-image): Add support for native lazy loading #13217

Merged
merged 15 commits into from May 16, 2019

Conversation

@sidharthachatterjee
Copy link
Member

commented Apr 8, 2019

So... Chrome just added support for native lazy loading for images and iframes (https://twitter.com/addyosmani/status/1114777583302799360)

This PR adds support in gatsby-image so that we use native lazy loading when available and fall back to our IntersectionObserver code when not.

Test

yarn add gatsby-image@loading-attribute

Notes

I've exposed the loading attribute as a prop but just realised that we'll want to set that based on our critical prop as @KyleAMathews noted in #13201

Another thing to note is that we always set this for the no script Img tag (rendered during SSR and no js) since it's a progressive enhancement and setting it does not break anything in browsers that are yet to support it

Todo

  • Add some snapshot tests
  • Update README and documentation for gatsby-image
  • Blog post
  • Deprecate critical prop and set loading based on it
  • Update using-gatsby examples

Related

sidharthachatterjee added some commits Apr 8, 2019

sidharthachatterjee added some commits Apr 8, 2019

packages/gatsby-image/src/index.js Show resolved Hide resolved
`loading` in HTMLImageElement.prototype
) {
// Setting isVisible to true to short circuit our IO code and let the browser do its magic
isVisible = true

This comment has been minimized.

Copy link
@KyleAMathews

KyleAMathews Apr 9, 2019

Contributor

maybe to make it clear this is now representing two different states it could be changed to isVisibleOrNativeLazyLoadingSupported — verbose is effective :-D

This comment has been minimized.

Copy link
@polarathene

polarathene Apr 9, 2019

Contributor

@KyleAMathews isn't the isVisible state here linked to the image components visibility state for it's picture element? I suggested a refactor here, but perhaps that's the wrong approach.

@polarathene
Copy link
Contributor

left a comment

I see you got onto while I was asleep :P All good, I think you did a better job than if I had attempted it!

Provided a review as requested :)

packages/gatsby-image/src/index.js Show resolved Hide resolved
packages/gatsby-image/src/index.js Show resolved Hide resolved
packages/gatsby-image/src/index.js Show resolved Hide resolved
} = props

const loadingAttribute = {
...(nativeLazyLoadSupported && loading),

This comment has been minimized.

Copy link
@polarathene

polarathene Apr 9, 2019

Contributor

Is nativeLazyLoadSupported boolean actually useful here?

This doesn't seem like the right approach for handling this single attribute. You're defining a const obj with a potential single prop that if the boolean prop is true, adopts the loading var as a key/prop to it's contained string value?

The destructuring approach here and below for this seems to harm readability. Why not instead go with:

loading={loading || `auto`}
// or conditionally, if the prop isn't specified, the attribute won't be assigned
loading={loading}

If the browser supports this attribute, auto is applied by default implicitly, there isn't a need to check for native support to assign it, makes no difference.

@DSchau

This comment has been minimized.

Copy link
Contributor

commented Apr 23, 2019

Fixes #13201

@polarathene

This comment has been minimized.

Copy link
Contributor

commented Apr 23, 2019

Any feedback to what I gave? If there's nothing wrong with it, I could perhaps make the changes as it seems @sidharthachatterjee is busy/away for a couple weeks now?

If so, how do I contribute to this PR? Or do I need to fork it and send another PR in? Or does @sidharthachatterjee still want to finish this PR?

@sidharthachatterjee sidharthachatterjee changed the title [WIP] feat(gatsby-image): Add support for native lazy loading feat(gatsby-image): Add support for native lazy loading May 16, 2019

sidharthachatterjee and others added some commits May 16, 2019

Apply suggestions from code review
Co-Authored-By: Dustin Schau <DSchau@users.noreply.github.com>
@KyleAMathews
Copy link
Contributor

left a comment

Awesome work @sidharthachatterjee!

sidharthachatterjee added some commits May 16, 2019

@pieh
Copy link
Contributor

left a comment

LGTM!

@pieh

pieh approved these changes May 16, 2019

Copy link
Contributor

left a comment

LGTM! (deju vu)

@KyleAMathews
Copy link
Contributor

left a comment

:shipit:

@KyleAMathews KyleAMathews merged commit 3c0eb1e into master May 16, 2019

18 checks passed

Danger All good
Details
Peril All green. Congrats.
Details
ci/circleci: bootstrap Your tests passed on CircleCI!
Details
ci/circleci: e2e_tests_development_runtime Your tests passed on CircleCI!
Details
ci/circleci: e2e_tests_gatsby-image Your tests passed on CircleCI!
Details
ci/circleci: e2e_tests_gatsbygram Your tests passed on CircleCI!
Details
ci/circleci: e2e_tests_path-prefix Your tests passed on CircleCI!
Details
ci/circleci: e2e_tests_production_runtime Your tests passed on CircleCI!
Details
ci/circleci: integration_tests_gatsby_pipeline Your tests passed on CircleCI!
Details
ci/circleci: integration_tests_long_term_caching Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: starters_validate Your tests passed on CircleCI!
Details
ci/circleci: unit_tests_node10 Your tests passed on CircleCI!
Details
ci/circleci: unit_tests_node12 Your tests passed on CircleCI!
Details
ci/circleci: unit_tests_node6 Your tests passed on CircleCI!
Details
ci/circleci: unit_tests_node8 Your tests passed on CircleCI!
Details
ci/circleci: unit_tests_www Your tests passed on CircleCI!
Details
unit_tests_windows Build #20190516.72 succeeded
Details

@KyleAMathews KyleAMathews deleted the feat/add-native-lazy-loading-support branch May 16, 2019

@sidharthachatterjee

This comment has been minimized.

Copy link
Member Author

commented May 16, 2019

@pieh You mean a glitch in the Matrix

@sidharthachatterjee

This comment has been minimized.

Copy link
Member Author

commented May 16, 2019

Published in gatsby-image@2.1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.