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

Use IntersectionObserver when polyfilled after gatsby-image first load #3056

Conversation

lsirivong
Copy link
Contributor

@lsirivong lsirivong commented Nov 28, 2017

Scenario:

If a browser lacks IntersectionObserver support, and later becomes polyfilled with support, gatsby-image would throw the error TypeError: undefined is not an object (evaluating 'io.observe').

Explanation:

The <Image> component checks for IntersectionObserver support upon instantiation, but io would only attempt to be defined once, upon initial load of gatsby-image. This resulted in an attempt to use the undefined io variable.

This change attempts to initialize io if not already defined whenever it is requested.

@gatsbybot
Copy link
Collaborator

Deploy preview ready!

Built with commit 2fce7b0

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

@gatsbybot
Copy link
Collaborator

Deploy preview ready!

Built with commit 2fce7b0

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

@KyleAMathews
Copy link
Contributor

Cool! Yeah, lazy-loading the polyfill dynamically is the right call for most sites so this is necessary.

@KyleAMathews
Copy link
Contributor

It'd be nice to add the same PR for gatsby-link if you have time

const io = new window.IntersectionObserver(entries => {

@KyleAMathews KyleAMathews merged commit 68f68ec into gatsbyjs:master Nov 28, 2017
@lsirivong
Copy link
Contributor Author

Thanks!

From what I can tell, gatsby-link is already checking for IntersectionObserver support upon component instantiation, so I think it's all set there!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants