Add progressive image loading example

gatsbyjs · Oct 25, 2016 · 3ced3e9 · 3ced3e9
1 parent 637756d
commit 3ced3e9
Showing 1 changed file with 37 additions and 18 deletions.
diff --git a/examples/image-gallery/templates/image-page.js b/examples/image-gallery/templates/image-page.js
@@ -1,24 +1,38 @@
 import React from 'react'
 import { rhythm } from 'utils/typography'
 
-const ImagePage = (props) => {
-  console.log(props)
-  const {regular, retina} = props.data.image
-  return (
-    <div>
-      <p>{props.data.image.FileName}</p>
-      <img
-        src={regular.src}
-        srcSet={`${retina.src} 2x`}
-        style={{
-          display: 'inline',
-          marginRight: rhythm(1/2),
-          marginBottom: rhythm(1/2),
-          verticalAlign: 'middle',
-        }}
-      />
-    </div>
-  )
+class ImagePage extends React.Component {
+  constructor () {
+    super()
+    this.state = {
+      loaded: false,
+    }
+  }
+
+  render () {
+    console.log(this.props)
+    const {regular, retina, micro} = this.props.data.image
+    return (
+      <div>
+        <p>{this.props.data.image.FileName}</p>
+        <img
+          src={`data:image/jpeg;base64,${micro.src}`}
+          style={{
+            width: regular.width,
+            height: regular.height,
+            position: 'absolute',
+            transition: 'opacity 0.5s',
+            opacity: this.state.loaded ? 0 : 1,
+          }}
+        />
+        <img
+          src={regular.src}
+          onLoad={() => this.setState({ loaded: true })}
+          srcSet={`${retina.src} 2x`}
+        />
+      </div>
+    )
+  }
 }
 
 export default ImagePage
@@ -27,8 +41,13 @@ export const pageQuery = `
   query ImagePage($path: String!) {
     image(path: $path) {
       FileName
+      micro: image(width: 20, base64: true) {
+        src
+      }
       regular: image(width: 1000) {
         src
+        width
+        height
       }
       retina: image(width: 2000) {
         src