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

gatsby-image additional callback onStartLoad #6659

Closed
ghost opened this issue Jul 22, 2018 · 2 comments
Closed

gatsby-image additional callback onStartLoad #6659

ghost opened this issue Jul 22, 2018 · 2 comments
Labels
help wanted Issue with a clear description that the community can help with.

Comments

@ghost
Copy link

ghost commented Jul 22, 2018

Summary

An additional prop for gatsby-image called onStartLoad which takes a function and fires when the full-sized starts to get loaded.
Very similar to the onLoad prop but always fires earlier.
It could be called here

Motivation

I am recreating this page with gatsbyJS: https://qwergelesen.de/
Every post-box has an animation when it becomes visible. Currently I start the animation with the onLoad prop of gatsby-image. Hence the loading of the image blocks everything, on devices with slow internet-connections it is very noticeable. The user never sees the small preview, hence gatsby-image is not utilized to the fullest.

I could write my own IntersectionObserver which fires exactly when the gatsby-image observer fires... which seems kind of redundant and would increase the workload on the client.

@KyleAMathews
Copy link
Contributor

Seems like a reasonable addition! Would love to see a PR that fleshes out the idea a bit more.

@wuweiweiwu wuweiweiwu added help wanted Issue with a clear description that the community can help with. 🏷 type: feature labels Jul 22, 2018
kaoDev pushed a commit to kaoDev/gatsby that referenced this issue Sep 25, 2018
kaoDev pushed a commit to kaoDev/gatsby that referenced this issue Sep 28, 2018
m-allanson added a commit to kaoDev/gatsby that referenced this issue Dec 7, 2018
* 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)
  ...
@LekoArts
Copy link
Contributor

Feature was merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Issue with a clear description that the community can help with.
Projects
None yet
Development

No branches or pull requests

3 participants