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

fix(gatsby-image): Fix loading="eager" & critical #17148

Merged
merged 3 commits into from
Aug 29, 2019
Merged

fix(gatsby-image): Fix loading="eager" & critical #17148

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
04af661
Use triple equal
glennreyes Aug 28, 2019
b0c6232
Fix critical flag
glennreyes Aug 28, 2019
e3e96d5
Use flag as class property
glennreyes Aug 28, 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
11 changes: 6 additions & 5 deletions packages/gatsby-image/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,16 +283,17 @@ class Image extends React.Component {
// already in the browser cache so it's cheap to just show directly.
this.seenBefore = isBrowser && inImageCache(props)

this.addNoScript = !(props.critical && !props.fadeIn)
this.isCritical = props.loading === `eager` || props.critical

this.addNoScript = !(this.isCritical && !props.fadeIn)
this.useIOSupport =
!hasNativeLazyLoadSupport &&
hasIOSupport &&
!props.critical &&
!this.isCritical &&
!this.seenBefore

const isVisible =
props.critical ||
props.loading == `eager` ||
this.isCritical ||
(isBrowser && (hasNativeLazyLoadSupport || !this.useIOSupport))

this.state = {
Expand All @@ -311,7 +312,7 @@ class Image extends React.Component {
if (this.state.isVisible && typeof this.props.onStartLoad === `function`) {
this.props.onStartLoad({ wasCached: inImageCache(this.props) })
}
if (this.props.critical) {
if (this.isCritical) {
const img = this.imageRef.current
if (img && img.complete) {
this.handleImageLoaded()
Expand Down