lazy load images (#469)

* added lazy-sizes lib * added lazy loader styles and fixed some svg things that were causing console errors * trying new plugin * yarn format * removed other plugin, tweaked scss
vigetlabs · Jan 11, 2018 · b30c061 · b30c061
1 parent 71f0bc6
commit b30c061
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 9 deletions.
diff --git a/packages/microcosm-www-next/package.json b/packages/microcosm-www-next/package.json
@@ -8,7 +8,8 @@
     "gatsby-link": "^1.6.22",
     "gatsby-plugin-react-helmet": "^1.0.8",
     "gatsby-plugin-sass": "^1.0.12",
-    "intersection-observer": "^0.5.0"
+    "intersection-observer": "^0.5.0",
+    "lazysizes": "^4.0.1"
   },
   "keywords": [
     "gatsby"

diff --git a/packages/microcosm-www-next/src/components/graphic.js b/packages/microcosm-www-next/src/components/graphic.js
@@ -10,8 +10,8 @@ const Graphic = ({ section, microcosmView }) => (
   >
     {microcosmView || section === 0 || section == 9 ? (
       <img
-        src={`/${section}-microcosm.png`}
-        className="microcosm-graphic"
+        data-src={`/${section}-microcosm.png`}
+        className="lazyload microcosm-graphic"
         alt="TODO"
       />
     ) : (

diff --git a/packages/microcosm-www-next/src/images/browser-icon.js b/packages/microcosm-www-next/src/images/browser-icon.js
@@ -7,7 +7,6 @@ const BrowserIcon = () => (
     height="24"
     viewBox="0 0 24 24"
     style={{ marginRight: '10px' }}
-    preserveAspectRatio
   >
     <path d="M22,3.2C22,2.5,21.5,2,20.8,2H3.2C2.5,2,2,2.5,2,3.2V15h20C22,15,22,3.2,22,3.2z M20,13H4V4h16V13z M22,16H2c-0.2,0.4-2,4.6-2,5c0,0.5,0.4,1,1,1h22c0.6,0,1-0.5,1-1C24,20.6,22.2,16.4,22,16z M9.8,21l0.5-1h3.5l0.5,1H9.8z" />
   </svg>

diff --git a/packages/microcosm-www-next/src/images/planet-icon.js b/packages/microcosm-www-next/src/images/planet-icon.js
@@ -7,7 +7,6 @@ const PlanetIcon = () => (
     height="24"
     viewBox="0 0 69.7 69.4"
     style={{ marginRight: '10px' }}
-    preserveAspectRatio
   >
     <g>
       <path d="M59.5,15.3C56.7,22.1,50.7,31.3,41,41c-7.8,7.8-16.1,14-23.4,17.5c-0.8,0.4-1.6,0.7-2.3,1c-3.8-2.5-7-5.7-9.4-9.4c-1.4-2.1-2.5-4.5-3.4-6.9c-1.2-3.3-1.8-6.8-1.8-10.5c0-17.7,14.3-32,32-32c3.7,0,7.2,0.6,10.5,1.8c2.4,0.9,4.8,2,6.9,3.4C53.8,8.3,57.1,11.5,59.5,15.3z" />

diff --git a/packages/microcosm-www-next/src/images/viget-logo.js b/packages/microcosm-www-next/src/images/viget-logo.js
diff --git a/packages/microcosm-www-next/src/layouts/index.js b/packages/microcosm-www-next/src/layouts/index.js
@@ -8,8 +8,8 @@ import '../stylesheets/app.scss'
 const isBrowser = typeof window !== 'undefined'
 
 if (isBrowser) {
-  //if this is running in browser, import IntersectionObserver polyfill
-  require('intersection-observer')
+  require('intersection-observer') //IntersectionObserver polyfill
+  require('lazysizes') //lazy loading images
 }
 
 const Navigation = () => (

diff --git a/packages/microcosm-www-next/src/stylesheets/app.scss b/packages/microcosm-www-next/src/stylesheets/app.scss
@@ -25,5 +25,6 @@
 
 // components (page level blocks and components)
 @import 'components/browser-graphic';
+@import 'components/lazy-load';
 @import 'components/side-nav';
-@import 'components/toggle-container';
+@import 'components/toggle-container';
diff --git a/packages/microcosm-www-next/src/stylesheets/components/_lazy-load.scss b/packages/microcosm-www-next/src/stylesheets/components/_lazy-load.scss
@@ -0,0 +1,9 @@
+.lazyload,
+.lazyloading {
+	opacity: 0;
+}
+
+.lazyloaded {
+	opacity: 1;
+	transition: opacity 0.3s;
+}