From c4a7c40d63538704f8964cdeb1df8a04285e9b21 Mon Sep 17 00:00:00 2001 From: Joshua Walsh Date: Thu, 4 Jul 2019 23:20:54 +1000 Subject: [PATCH] Fix blur-up preview image not working on initial page load (#14816) Previously this effect only worked for AJAX-based page loads. This change allows the effect to (mostly) work on initial load when the JS isn't yet loaded. If JS is already loaded then the original behaviour is preserved. This increases the head size by 160 bytes but decreases the size of each image element by 103 bytes. The head is only downloaded on initial page load (not AJAX loads), so if the visitor encounters 2 or more images during their visit then this change was worth it. --- packages/gatsby-remark-images/.gitignore | 1 + .../src/__tests__/__snapshots__/index.js.snap | 36 ++++++------------- .../gatsby-remark-images/src/constants.js | 10 ++++++ .../src/gatsby-browser.js | 24 +++++++++---- .../gatsby-remark-images/src/gatsby-ssr.js | 26 ++++++++++++++ packages/gatsby-remark-images/src/index.js | 33 +++-------------- 6 files changed, 70 insertions(+), 60 deletions(-) create mode 100644 packages/gatsby-remark-images/src/gatsby-ssr.js diff --git a/packages/gatsby-remark-images/.gitignore b/packages/gatsby-remark-images/.gitignore index dcc20e9f74bf9..d2729f58abceb 100644 --- a/packages/gatsby-remark-images/.gitignore +++ b/packages/gatsby-remark-images/.gitignore @@ -1,5 +1,6 @@ /constants.js /gatsby-browser.js +/gatsby-ssr.js /index.js /__tests__/* tests \ No newline at end of file diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap index b9e98d952adff..f11265487067a 100644 --- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap @@ -11,9 +11,8 @@ exports[`it handles goofy nesting properly 1`] = ` > \\"test\\" \\"img\\" - \\"this + \\"this " `; @@ -54,7 +52,7 @@ exports[`it leaves linked HTML img tags alone 1`] = ` exports[`it leaves single-line linked HTML img tags alone 1`] = ` " - \\"this + \\"this " `; @@ -62,7 +60,7 @@ exports[`it transforms HTML img tags 1`] = ` " - \\"my + \\"my " `; @@ -71,7 +69,7 @@ exports[`it transforms HTML img tags with query strings 1`] = ` " - \\"my + \\"my " `; @@ -94,7 +92,6 @@ exports[`it transforms image references in markdown 1`] = ` > \\"alt \\"image\\" \\"image\\" \\"image\\" \\"some \\"some \\"some \\"some \\"some \\"some \\"some \\"my { +exports.onRouteUpdate = ({ pluginOptions }) => { + const options = Object.assign({}, DEFAULT_OPTIONS, pluginOptions) + const imageWrappers = document.querySelectorAll(`.${imageWrapperClass}`) // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ @@ -19,17 +22,26 @@ exports.onRouteUpdate = () => { const onImageLoad = () => { backgroundElement.style.transition = `opacity 0.5s 0.5s` - backgroundElement.style.opacity = 0 imageElement.style.transition = `opacity 0.5s` + onImageComplete() + } + + const onImageComplete = () => { + backgroundElement.style.opacity = 0 imageElement.style.opacity = 1 + imageElement.style.color = `inherit` + imageElement.style.boxShadow = `inset 0px 0px 0px 400px ${ + options.backgroundColor + }` imageElement.removeEventListener(`load`, onImageLoad) + imageElement.removeEventListener(`error`, onImageComplete) } + imageElement.style.opacity = 0 + imageElement.addEventListener(`load`, onImageLoad) + imageElement.addEventListener(`error`, onImageComplete) if (imageElement.complete) { - backgroundElement.style.opacity = 0 - } else { - imageElement.style.opacity = 0 - imageElement.addEventListener(`load`, onImageLoad) + onImageComplete() } } } diff --git a/packages/gatsby-remark-images/src/gatsby-ssr.js b/packages/gatsby-remark-images/src/gatsby-ssr.js new file mode 100644 index 0000000000000..f7a8230cea764 --- /dev/null +++ b/packages/gatsby-remark-images/src/gatsby-ssr.js @@ -0,0 +1,26 @@ +import React from "react" + +const { imageClass } = require(`./constants`) + +exports.onRenderBody = ({ setHeadComponents }) => { + const style = ` + .${imageClass} { + width: 100%; + height: 100%; + margin: 0; + vertical-align: middle; + position: absolute; + top: 0; + left: 0; + color: transparent; + }` + .replace(/\s*\n\s*/g, ``) + .replace(/: /g, `:`) + .replace(/ \{/g, `{`) + + setHeadComponents([ + , + ]) +} diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 17f4037b246d0..8a0dda35261fb 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -1,4 +1,5 @@ const { + DEFAULT_OPTIONS, imageClass, imageBackgroundClass, imageWrapperClass, @@ -24,18 +25,7 @@ module.exports = ( { files, markdownNode, markdownAST, pathPrefix, getNode, reporter, cache }, pluginOptions ) => { - const defaults = { - maxWidth: 650, - wrapperStyle: ``, - backgroundColor: `white`, - linkImagesToOriginal: true, - showCaptions: false, - pathPrefix, - withWebp: false, - tracedSVG: false, - } - - const options = _.defaults(pluginOptions, defaults) + const options = _.defaults(pluginOptions, { pathPrefix }, DEFAULT_OPTIONS) const findParentLinks = ({ children }) => children.some( @@ -163,26 +153,12 @@ module.exports = ( overWrites.alt ? overWrites.alt : node.alt ? node.alt : defaultAlt ) - const title = node.title ? node.title : `` - - const imageStyle = ` - width: 100%; - height: 100%; - margin: 0; - vertical-align: middle; - position: absolute; - top: 0; - left: 0; - box-shadow: inset 0px 0px 0px 400px ${options.backgroundColor};`.replace( - /\s*(\S+:)\s*/g, - `$1` - ) + const title = node.title ? node.title : alt // Create our base image tag let imageTag = ` ${alt}