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

[gatsby-image] re: fade out base64 on full image load #7539

Merged
merged 6 commits into from
Dec 12, 2018
Merged

[gatsby-image] re: fade out base64 on full image load #7539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4838ced
Make initial state be the same on both client and server
Aug 22, 2018
f706026
Merge branch 'master' into topics/gatsby-image-hide-base64
Aug 26, 2018
837afbd
Merge branch 'master' into topics/gatsby-image-hide-base64
m-allanson Dec 11, 2018
d28d38f
Fix for browser env without Intersection Observer available
m-allanson Dec 12, 2018
74ef272
Simpler implementation
m-allanson Dec 12, 2018
6f702ee
Typo
m-allanson Dec 12, 2018
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
12 changes: 6 additions & 6 deletions packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ exports[`<Img /> should render fixed size images 1`] = `
alt=""
class="placeholder"
src="string_of_base64"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; color: red;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;"
title="Title for the image"
/>
<div
style="width: 100px; opacity: 0; height: 100px;"
style="width: 100px; opacity: 1; height: 100px;"
title="Title for the image"
/>
<picture>
Expand All @@ -29,7 +29,7 @@ exports[`<Img /> should render fixed size images 1`] = `
alt="Alt text for the image"
height="100"
src="test_image.jpg"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
title="Title for the image"
width="100"
/>
Expand All @@ -54,11 +54,11 @@ exports[`<Img /> should render fluid images 1`] = `
alt=""
class="placeholder"
src="string_of_base64"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; color: red;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;"
title="Title for the image"
/>
<div
style="position: absolute; top: 0px; bottom: 0px; opacity: 0; right: 0px; left: 0px;"
style="position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px;"
title="Title for the image"
/>
<picture>
Expand All @@ -74,7 +74,7 @@ exports[`<Img /> should render fluid images 1`] = `
<img
alt="Alt text for the image"
src="test_image.jpg"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
title="Title for the image"
/>
</picture>
Expand Down
3 changes: 2 additions & 1 deletion packages/gatsby-image/src/__tests__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,9 @@ describe(`<Img />`, () => {
expect(placeholderImageTag.getAttribute(`title`)).toEqual(
`Title for the image`
)
// No Intersection Observer in JSDOM, so placeholder img will be visible (opacity 1) by default
expect(placeholderImageTag.getAttribute(`style`)).toEqual(
`position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; color: red;`
`position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;`
)
expect(placeholderImageTag.getAttribute(`class`)).toEqual(`placeholder`)
})
Expand Down
12 changes: 5 additions & 7 deletions packages/gatsby-image/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,36 +127,34 @@ class Image extends React.Component {
constructor(props) {
super(props)

// If this browser doesn't support the IntersectionObserver API
// we default to start downloading the image right away.
// default settings for browser without Intersection Observer available
let isVisible = true
let imgLoaded = true
let imgLoaded = false
let IOSupported = false
let fadeIn = props.fadeIn

// If this image has already been loaded before then we can assume it's
// already in the browser cache so it's cheap to just show directly.
const seenBefore = inImageCache(props)

// browser with Intersection Observer available
if (
!seenBefore &&
typeof window !== `undefined` &&
window.IntersectionObserver
) {
isVisible = false
imgLoaded = false
IOSupported = true
}

// Always don't render image while server rendering
// Never render image during SSR
if (typeof window === `undefined`) {
isVisible = false
imgLoaded = false
}

// Force render for critical images
if (props.critical) {
isVisible = true
imgLoaded = false
IOSupported = false
}

Expand Down