From e8af8dd6eb16d12c2f6d95d386dd72ca33d10983 Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Tue, 24 Jul 2018 20:48:08 +0200 Subject: [PATCH 1/9] implementation of the onStartLoad handler for gatsby-image --- packages/gatsby-image/src/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index fc98d83e53563..e2094105449a0 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -170,9 +170,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() + } + } + handleRef(ref) { if (this.state.IOSupported && ref) { listenToIntersections(ref, () => { + if (typeof this.props.onStartLoad === "function") { + this.props.onStartLoad() + } + this.setState({ isVisible: true, imgLoaded: false }) }) } @@ -472,6 +482,7 @@ Image.propTypes = { backgroundColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), onLoad: PropTypes.func, onError: PropTypes.func, + onStartLoad: PropTypes.func, Tag: PropTypes.string, } From 3de2bd50508ebfd8a4f52ceeab857cfa4b493eef Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Tue, 24 Jul 2018 20:56:56 +0200 Subject: [PATCH 2/9] update to typescript declarations of gatsby-image --- packages/gatsby-image/index.d.ts | 38 ++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/gatsby-image/index.d.ts b/packages/gatsby-image/index.d.ts index 980e625e61a8f..5d80c31071989 100644 --- a/packages/gatsby-image/index.d.ts +++ b/packages/gatsby-image/index.d.ts @@ -1,21 +1,25 @@ -import * as React from "react"; +import * as React from "react" interface GatsbyImageProps { - resolutions?: object; - sizes?: object; - fixed?: object; - fluid?: object; - fadeIn?: boolean; - title?: string; - alt?: string; - className?: string | object; - outerWrapperClassName?: string | object; - style?: object; - imgStyle?: object; - position?: string; - backgroundColor?: string | boolean; - onLoad?: (event: any) => void; - Tag?: string; + resolutions?: object + sizes?: object + fixed?: object + fluid?: object + fadeIn?: boolean + title?: string + alt?: string + className?: string | object + outerWrapperClassName?: string | object + style?: object + imgStyle?: object + position?: string + backgroundColor?: string | boolean + onLoad?: (event: any) => void + onStartLoad?: () => void + Tag?: string } -export default class GatsbyImage extends React.Component {} +export default class GatsbyImage extends React.Component< + GatsbyImageProps, + any +> {} From dd380d69d96009723823896f4bb56e96520a59fb Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Tue, 24 Jul 2018 23:18:51 +0200 Subject: [PATCH 3/9] changed double quotes to backticks --- packages/gatsby-image/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index e2094105449a0..e3ca54d50c0c0 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -171,7 +171,7 @@ class Image extends React.Component { } componentDidMount() { - if (this.state.isVisible && typeof this.props.onStartLoad === "function") { + if (this.state.isVisible && typeof this.props.onStartLoad === `function`) { this.props.onStartLoad() } } @@ -179,7 +179,7 @@ class Image extends React.Component { handleRef(ref) { if (this.state.IOSupported && ref) { listenToIntersections(ref, () => { - if (typeof this.props.onStartLoad === "function") { + if (typeof this.props.onStartLoad === `function`) { this.props.onStartLoad() } From 4880dc622397141597306d30e616993f470658fd Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Tue, 24 Jul 2018 23:53:26 +0200 Subject: [PATCH 4/9] updated declaration file to better represent current state of gatsby-image --- packages/gatsby-image/index.d.ts | 33 +++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/packages/gatsby-image/index.d.ts b/packages/gatsby-image/index.d.ts index 5d80c31071989..27cff28415418 100644 --- a/packages/gatsby-image/index.d.ts +++ b/packages/gatsby-image/index.d.ts @@ -1,10 +1,32 @@ import * as React from "react" +interface FixedObject { + width: number + height: number + src: string + srcSet: string + base64?: string + tracedSVG?: string + srcWebp?: string + srcSetWebp?: string +} + +interface FluidObject { + aspectRatio: number + src: string + srcSet: string + sizes: string + base64: string + tracedSVG: string + srcWebp: string + srcSetWebp: string +} + interface GatsbyImageProps { - resolutions?: object - sizes?: object - fixed?: object - fluid?: object + resolutions?: FixedObject + sizes?: FluidObject + fixed?: FixedObject + fluid?: FluidObject fadeIn?: boolean title?: string alt?: string @@ -12,9 +34,10 @@ interface GatsbyImageProps { outerWrapperClassName?: string | object style?: object imgStyle?: object + placeholderStyle: object position?: string backgroundColor?: string | boolean - onLoad?: (event: any) => void + onLoad?: () => void onStartLoad?: () => void Tag?: string } From ce75b87b0eec6ac634a8240fa653e8e13f7321ac Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Wed, 25 Jul 2018 13:20:15 +0200 Subject: [PATCH 5/9] make sure onStartLoad is only fired once --- packages/gatsby-image/src/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index e3ca54d50c0c0..4d5a45c522b9d 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -179,8 +179,11 @@ class Image extends React.Component { handleRef(ref) { if (this.state.IOSupported && ref) { listenToIntersections(ref, () => { - if (typeof this.props.onStartLoad === `function`) { - this.props.onStartLoad() + if ( + !this.state.isVisible && + typeof this.props.onStartLoad === `function` + ) { + this.props.onStartLoad(); } this.setState({ isVisible: true, imgLoaded: false }) From b7854d8ef03bbb4706ffd05e4e0f308458a4f640 Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Wed, 25 Jul 2018 19:38:45 +0200 Subject: [PATCH 6/9] fixed image cache information store provide cache information in the onStartLoad handler --- packages/gatsby-image/index.d.ts | 2 +- packages/gatsby-image/src/index.js | 13 +++++-------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/gatsby-image/index.d.ts b/packages/gatsby-image/index.d.ts index 27cff28415418..4904eb2c6e29c 100644 --- a/packages/gatsby-image/index.d.ts +++ b/packages/gatsby-image/index.d.ts @@ -38,7 +38,7 @@ interface GatsbyImageProps { position?: string backgroundColor?: string | boolean onLoad?: () => void - onStartLoad?: () => void + onStartLoad?: (param: { wasCached: boolean }) => void Tag?: string } diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 4d5a45c522b9d..32e9d259ece01 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -26,12 +26,7 @@ const inImageCache = props => { ? convertedProps.fluid.src : convertedProps.fixed.src - if (imageCache[src]) { - return true - } else { - imageCache[src] = true - return false - } + return imageCache[src] || false } let io @@ -172,7 +167,7 @@ class Image extends React.Component { componentDidMount() { if (this.state.isVisible && typeof this.props.onStartLoad === `function`) { - this.props.onStartLoad() + this.props.onStartLoad({ wasCached: inImageCache(this.props) }) } } @@ -183,7 +178,7 @@ class Image extends React.Component { !this.state.isVisible && typeof this.props.onStartLoad === `function` ) { - this.props.onStartLoad(); + this.props.onStartLoad({ wasCached: inImageCache(this.props) }) } this.setState({ isVisible: true, imgLoaded: false }) @@ -309,6 +304,7 @@ class Image extends React.Component { sizes={image.sizes} style={imageStyle} onLoad={() => { + imageCache[image.src] = true this.state.IOSupported && this.setState({ imgLoaded: true }) this.props.onLoad && this.props.onLoad() }} @@ -410,6 +406,7 @@ class Image extends React.Component { style={imageStyle} onLoad={() => { this.setState({ imgLoaded: true }) + imageCache[image.src] = true this.props.onLoad && this.props.onLoad() }} onError={this.props.onError} From 182a9db407cedf1dd06e5da11f695c75dbe98e34 Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Tue, 31 Jul 2018 21:14:57 +0200 Subject: [PATCH 7/9] updatede readme --- packages/gatsby-image/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index bb902e8bb37f7..c2082129ff647 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -259,6 +259,7 @@ prop. e.g. `` | `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned | | `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. | | `onLoad` | `func` | A callback that is called when the full-size image has loaded. | +| `onStartLoad` | `func` | A callback that is called when the full-size image starts loading, it gets the parameter { wasCached: boolean } provided. | | `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. | ## Image processing arguments From f588c52b01987e598d21edffee34bb3cf9a97562 Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Wed, 19 Sep 2018 20:31:38 +0200 Subject: [PATCH 8/9] better name for cache setter --- packages/gatsby-image/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index ab6fab61356c0..36e98fd231b1d 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -29,7 +29,7 @@ const inImageCache = props => { return imageCache[src] || false } -const activateImageCache = props => { +const activateCacheForImage = props => { const convertedProps = convertProps(props) // Find src const src = convertedProps.fluid @@ -198,7 +198,7 @@ class Image extends React.Component { } handleImageLoaded() { - activateImageCache(this.props) + activateCacheForImage(this.props) this.setState({ imgLoaded: true }) if (this.state.seenBefore) { From a593d35c221e7d1e3e0c935d53b0120a85ebceed Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Wed, 19 Sep 2018 20:48:22 +0200 Subject: [PATCH 9/9] lint fix --- packages/gatsby-image/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 36e98fd231b1d..828c97cb952ae 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -36,7 +36,7 @@ const activateCacheForImage = props => { ? convertedProps.fluid.src : convertedProps.fixed.src - imageCache[src] = true; + imageCache[src] = true } let io