implementation of the onStartLoad handler for gatsby-image #6702

kaoDev · 2018-07-24T18:58:31Z

quick implementation for the feature request from the issue #6659.
I think this should be enough to handle the scenario described by @zionis137

With this change the gatsby-image component accepts a new optional prop onStartLoad, it is a function called with no arguments and expecting no return value.

KyleAMathews · 2018-07-24T19:02:20Z

Deploy preview for using-postcss-sass failed.

Built with commit bd2058a17c0acc4ce73d993c2f8ac27dab04cf06

https://app.netlify.com/sites/using-postcss-sass/deploys/5b746e3ac6aed608d33e1f53

gatsbybot · 2018-07-24T19:03:59Z

Deploy preview for using-drupal ready!

Built with commit bd2058a17c0acc4ce73d993c2f8ac27dab04cf06

https://deploy-preview-6702--using-drupal.netlify.com

gatsbybot · 2018-07-24T19:04:46Z

Deploy preview for gatsbygram ready!

Built with commit bd2058a17c0acc4ce73d993c2f8ac27dab04cf06

https://deploy-preview-6702--gatsbygram.netlify.com

KyleAMathews · 2018-07-24T19:32:54Z

Deploy preview for gatsbyjs failed.

Built with commit bd2058a17c0acc4ce73d993c2f8ac27dab04cf06

https://app.netlify.com/sites/gatsbyjs/deploys/5b746e38c6aed608d33e1f47

pieh · 2018-07-25T11:08:51Z

packages/gatsby-image/src/index.js

@@ -168,9 +168,19 @@ class Image extends React.Component {
    this.handleRef = this.handleRef.bind(this)
  }

+  componentDidMount() {
+    if (this.state.isVisible && typeof this.props.onStartLoad === `function`) {
+      this.props.onStartLoad()


just checking here - this won't cause firing this "event" twice if image is visible in initial viewarea? maybe this should also check if window.IntersectionObserver is available?

good point, I just pushed a change to fire only if the image was not visible before

pieh · 2018-07-25T11:11:53Z

Should it fire if image is already cached in browser?

kaoDev · 2018-07-25T11:26:41Z

hmm, I would say so, for the user it's no difference if the image is loaded from a server or from the cache. And as the user of this component the onStartLoad handler marks the moment when the actual image DOM element is inserted, which is in case of cache loading direct after mounting.

ghost · 2018-07-25T14:06:22Z

Or the function could have an boolean argument wasCached. Then the user can decide what he wants to do.

kaoDev · 2018-07-25T17:44:08Z

the onStartLoad handler now gets called with an object holding the wasCached information, by implementing this I also realised that the information if the image was already seen was written at the wrong moment. Instead of updating the cache state in the onLoad handler the cache entry was set in the constructor, whenever another gatsby-image with the same src was already constructed.

KyleAMathews · 2018-08-15T18:22:58Z

Deploy preview for using-styled-components failed.

Built with commit bd2058a17c0acc4ce73d993c2f8ac27dab04cf06

https://app.netlify.com/sites/using-styled-components/deploys/5b746e3bc6aed608d33e1f5f

KyleAMathews · 2018-08-15T18:23:35Z

Deploy preview for using-contentful failed.

Built with commit bd2058a

https://app.netlify.com/sites/using-contentful/deploys/5b746e3bc6aed608d33e1f62

kaoDev · 2018-08-15T20:09:40Z

those errors seem to have the origin in some other unrelated code, I tried to merge a clean master state (a release tag), but there are still errors.
So @KyleAMathews can you please have a look on this or give a hint how this automatic tests/deployments can be fixed on this branch?

…image

provide cache information in the onStartLoad handler

kaoDev · 2018-09-05T19:54:39Z

hey @pieh can you have another look, I just cleaned up the rebase mess I pushed a few days back and all checks are green 😄

…byjs#6659

* master: (870 commits) fix(graphql-skip-limit): declare `graphql` peer dependency (gatsbyjs#10305) fix(gatsby-plugin-offline): gracefully degrade if appshell isn't precached (gatsbyjs#10329) Service workers note (gatsbyjs#10276) fix(docs): link fixes, podcast addition (gatsbyjs#10332) feat(docs): Create clearer pathways in docs (gatsbyjs#9898) feat(www): Rename community section to creators (gatsbyjs#10312) docs(graphql-reference): clarify filtering using comma/and operator (gatsbyjs#10321) chore(release): Publish feat(gatsby-plugin-sass): Support Dart SASS (gatsbyjs#10159) fix(gatsby-source-drupal): use basic auth credentials to fetch remote files as well. (gatsbyjs#10302) fix(gatsby-source-filesystem): allow empty password for basic auth in createRemoteFileNode (gatsbyjs#10280) docs(gatsby-remark-prismjs): Use Gatsby V2 project structure (gatsbyjs#10059) chore: update link for react-gatsby-firebase-authentication (gatsbyjs#10314) fix(www): Awesome Gatsby sidebar link (gatsbyjs#10313) Add thijs koerselman to creators list (gatsbyjs#10303) chore(release): Publish fix(gatsby-plugin-emotion): allow for React.Fragment shorthand syntax (gatsbyjs#10291) feat(www): Update starter cards (gatsbyjs#10258) Update index.md (gatsbyjs#10307) Update index.md (gatsbyjs#10306) ...

m-allanson

This looks great, thanks @kaoDev 👍

gatsbot · 2018-12-07T21:03:02Z

Holy buckets, @kaoDev — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

* master: (1421 commits) feat(gatsby-image): add onStartLoad prop (#6702) fix(docs): add Ecosystem to docs sidebar, consistency with tutorial sidebar (#10350) fix(www): Starters.yaml housekeeping (#10354) docs: add ttag starter (#10352) docs: document branching (#9983) plugin checker initial commit (#7062) docs: new starter features is required (#10353) docs: migrated line highlighting to highlight-line, highlight-start, highlight-end (#10202) Add Birra Napoli to site showcase (#10344) Add BetterDocs to site showcase (#10349) chore(release): Publish Add option to keep metadata in files processed by `gatsby-plugin-sharp` (#10210) fix(gatsby): [loki] sync db autosaves (#10212) Add Ad Hoc Homework to sites.yml (#10346) fix(graphql-skip-limit): declare `graphql` peer dependency (#10305) fix(gatsby-plugin-offline): gracefully degrade if appshell isn't precached (#10329) Service workers note (#10276) fix(docs): link fixes, podcast addition (#10332) feat(docs): Create clearer pathways in docs (#9898) feat(www): Rename community section to creators (#10312) ...

* master: (35 commits) feat(gatsby-source-filesystem): keep original name of remote files (gatsbyjs#9777) docs(gatsby-source-contentful): Rewrite of gatsby-source-contentful query section (gatsbyjs#7533) Update "Deploying with Now" Guide (gatsbyjs#10390) Add Matomo to list of analytics plugins (gatsbyjs#10372) Add satispay.com to showcase (gatsbyjs#10380) Adds @goblindegook/gatsby-starter-typescript (gatsbyjs#10377) Fix typo in gatsby-remark-code-repls sample `gatsby-config.json` in README (gatsbyjs#10361) fix(gatsby): fix false type conflict warning on plugin fields (gatsbyjs#10355) fix(docs): Just a small typo fix in the docs (gatsbyjs#10359) feat(gatsby-image): add onStartLoad prop (gatsbyjs#6702) fix(docs): add Ecosystem to docs sidebar, consistency with tutorial sidebar (gatsbyjs#10350) fix(www): Starters.yaml housekeeping (gatsbyjs#10354) docs: add ttag starter (gatsbyjs#10352) docs: document branching (gatsbyjs#9983) plugin checker initial commit (gatsbyjs#7062) docs: new starter features is required (gatsbyjs#10353) docs: migrated line highlighting to highlight-line, highlight-start, highlight-end (gatsbyjs#10202) Add Birra Napoli to site showcase (gatsbyjs#10344) Add BetterDocs to site showcase (gatsbyjs#10349) chore(release): Publish ...

* master: (1432 commits) chore(release): Publish Fix Starter Library URL and update copy (gatsbyjs#10368) feat(gatsby-source-filesystem): keep original name of remote files (gatsbyjs#9777) docs(gatsby-source-contentful): Rewrite of gatsby-source-contentful query section (gatsbyjs#7533) Update "Deploying with Now" Guide (gatsbyjs#10390) Add Matomo to list of analytics plugins (gatsbyjs#10372) Add satispay.com to showcase (gatsbyjs#10380) Adds @goblindegook/gatsby-starter-typescript (gatsbyjs#10377) Fix typo in gatsby-remark-code-repls sample `gatsby-config.json` in README (gatsbyjs#10361) fix(gatsby): fix false type conflict warning on plugin fields (gatsbyjs#10355) fix(docs): Just a small typo fix in the docs (gatsbyjs#10359) feat(gatsby-image): add onStartLoad prop (gatsbyjs#6702) fix(docs): add Ecosystem to docs sidebar, consistency with tutorial sidebar (gatsbyjs#10350) fix(www): Starters.yaml housekeeping (gatsbyjs#10354) docs: add ttag starter (gatsbyjs#10352) docs: document branching (gatsbyjs#9983) plugin checker initial commit (gatsbyjs#7062) docs: new starter features is required (gatsbyjs#10353) docs: migrated line highlighting to highlight-line, highlight-start, highlight-end (gatsbyjs#10202) Add Birra Napoli to site showcase (gatsbyjs#10344) ...

* master: (1425 commits) showcase: Add TMDb Gatsby site (gatsbyjs#10411) chore(www): bump offline plugin version (gatsbyjs#10409) chore(release): Publish Fix Starter Library URL and update copy (gatsbyjs#10368) feat(gatsby-source-filesystem): keep original name of remote files (gatsbyjs#9777) docs(gatsby-source-contentful): Rewrite of gatsby-source-contentful query section (gatsbyjs#7533) Update "Deploying with Now" Guide (gatsbyjs#10390) Add Matomo to list of analytics plugins (gatsbyjs#10372) Add satispay.com to showcase (gatsbyjs#10380) Adds @goblindegook/gatsby-starter-typescript (gatsbyjs#10377) Fix typo in gatsby-remark-code-repls sample `gatsby-config.json` in README (gatsbyjs#10361) fix(gatsby): fix false type conflict warning on plugin fields (gatsbyjs#10355) fix(docs): Just a small typo fix in the docs (gatsbyjs#10359) feat(gatsby-image): add onStartLoad prop (gatsbyjs#6702) fix(docs): add Ecosystem to docs sidebar, consistency with tutorial sidebar (gatsbyjs#10350) fix(www): Starters.yaml housekeeping (gatsbyjs#10354) docs: add ttag starter (gatsbyjs#10352) docs: document branching (gatsbyjs#9983) plugin checker initial commit (gatsbyjs#7062) docs: new starter features is required (gatsbyjs#10353) ...

* implementation of the onStartLoad handler for gatsby-image * update to typescript declarations of gatsby-image * changed double quotes to backticks * updated declaration file to better represent current state of gatsby-image * make sure onStartLoad is only fired once * fixed image cache information store provide cache information in the onStartLoad handler * updatede readme * better name for cache setter * lint fix

pieh reviewed Jul 25, 2018

View reviewed changes

Kalle Ott added 7 commits September 3, 2018 19:11

implementation of the onStartLoad handler for gatsby-image

e8af8dd

update to typescript declarations of gatsby-image

3de2bd5

changed double quotes to backticks

dd380d6

updated declaration file to better represent current state of gatsby-…

4880dc6

…image

make sure onStartLoad is only fired once

ce75b87

fixed image cache information store

b7854d8

provide cache information in the onStartLoad handler

updatede readme

182a9db

kaoDev force-pushed the feature/#6659 branch from ced69b1 to 182a9db Compare September 5, 2018 19:19

pieh self-assigned this Sep 5, 2018

KyleAMathews force-pushed the master branch 5 times, most recently from fc4ca3e to 2116fff Compare September 17, 2018 20:36

Kalle Ott added 3 commits September 19, 2018 20:30

Merge branch 'master' of github.com:gatsbyjs/gatsby into feature/gats…

fa218c8

…byjs#6659

better name for cache setter

f588c52

lint fix

a593d35

Kalle Ott and others added 3 commits September 25, 2018 21:28

Merge branch 'master' into feature/gatsbyjs#6659

a457a38

Merge branch 'master' into feature/gatsbyjs#6659

61af17c

m-allanson approved these changes Dec 7, 2018

View reviewed changes

pieh merged commit 1d25a95 into gatsbyjs:master Dec 7, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

implementation of the onStartLoad handler for gatsby-image #6702

implementation of the onStartLoad handler for gatsby-image #6702

kaoDev commented Jul 24, 2018

KyleAMathews commented Jul 24, 2018 •

edited

gatsbybot commented Jul 24, 2018 •

edited

gatsbybot commented Jul 24, 2018 •

edited

KyleAMathews commented Jul 24, 2018 •

edited

pieh Jul 25, 2018 •

edited

kaoDev Jul 25, 2018

pieh commented Jul 25, 2018

kaoDev commented Jul 25, 2018

ghost commented Jul 25, 2018

kaoDev commented Jul 25, 2018

KyleAMathews commented Aug 15, 2018

KyleAMathews commented Aug 15, 2018

kaoDev commented Aug 15, 2018

kaoDev commented Sep 5, 2018

m-allanson left a comment

gatsbot bot commented Dec 7, 2018

implementation of the onStartLoad handler for gatsby-image #6702

implementation of the onStartLoad handler for gatsby-image #6702

Conversation

kaoDev commented Jul 24, 2018

KyleAMathews commented Jul 24, 2018 • edited

gatsbybot commented Jul 24, 2018 • edited

gatsbybot commented Jul 24, 2018 • edited

KyleAMathews commented Jul 24, 2018 • edited

pieh Jul 25, 2018 • edited

Choose a reason for hiding this comment

kaoDev Jul 25, 2018

Choose a reason for hiding this comment

pieh commented Jul 25, 2018

kaoDev commented Jul 25, 2018

ghost commented Jul 25, 2018

kaoDev commented Jul 25, 2018

KyleAMathews commented Aug 15, 2018

KyleAMathews commented Aug 15, 2018

kaoDev commented Aug 15, 2018

kaoDev commented Sep 5, 2018

m-allanson left a comment

Choose a reason for hiding this comment

gatsbot bot commented Dec 7, 2018

KyleAMathews commented Jul 24, 2018 •

edited

gatsbybot commented Jul 24, 2018 •

edited

gatsbybot commented Jul 24, 2018 •

edited

KyleAMathews commented Jul 24, 2018 •

edited

pieh Jul 25, 2018 •

edited