Add lazy load of images

Author: larsenwork

components/tools/gradient/editor.vue

@@ -68,7 +68,7 @@
         :class="{
           'is-active': $store.state.gradient.editorActive === 'direction'
         }"
-        name="Gradient direction"
+        aria-label="Gradient direction"
         @click="toggleEditor('direction')"
         @keydown.tab="tabAway($event, 'direction')"
       >
@@ -82,7 +82,7 @@
         :class="{
           'is-active': $store.state.gradient.editorActive === 'color1'
         }"
-        name="Gradient start color"
+        aria-label="Gradient start color"
         @click="toggleEditor('color1')"
       >
         <div
@@ -96,7 +96,7 @@
         :class="{
           'is-active': $store.state.gradient.editorActive === 'ease'
         }"
-        name="Gradient timing function"
+        aria-label="Gradient timing function"
         @click="toggleEditor('ease')"
       >
         <div
@@ -109,7 +109,7 @@
         :class="{
           'is-active': $store.state.gradient.editorActive === 'color2'
         }"
-        name="Gradient stop color"
+        aria-label="Gradient stop color"
         @click="toggleEditor('color2')"
         @keydown.tab="tabAway($event, 'color2')"
       >

components/tools/gradient/examples.vue

@@ -1,7 +1,9 @@
 <template>
-  <div>
+  <div v-lazy-container="{ selector: 'img' }">
     <p>Gradients under text/ui are used to increase contrast but should often be as invisible as possible. The examples below have the same amount of blackness behind the text.</p>
-    <div class="c-gradientExamples u-grid">
+    <div
+      class="c-gradientExamples u-grid"
+    >
       <div
         class="c-gradientExamples-item"
       >
@@ -11,7 +13,7 @@
           Linear
         </div>
         <img
-          src="/images/gradient-plant.jpg"
+          data-src="/images/gradient-plant.jpg"
           alt="plant"
         >
       </div>
@@ -24,7 +26,7 @@
           Easing
         </div>
         <img
-          src="/images/gradient-plant.jpg"
+          data-src="/images/gradient-plant.jpg"
           alt="plant"
         >
       </div>
@@ -51,13 +53,15 @@
       </div>
     </div>
     <p>I believe that there are many designs out there that could benefit from this approach, including the Spotify player shown below (click to see the big picture).</p>
-    <div class="c-gradientExamples u-grid">
+    <div
+      class="c-gradientExamples u-grid"
+    >
       <a
         href="/images/gradient-spotify-linear.jpg"
         class="c-gradientExamples-item"
       >
         <img
-          src="/images/gradient-spotify-linear.jpg"
+          data-src="/images/gradient-spotify-linear.jpg"
           alt="spotify with linear gradient"
         >
       </a>
@@ -66,7 +70,7 @@
         class="c-gradientExamples-item"
       >
         <img
-          src="/images/gradient-spotify-easing.jpg"
+          data-src="/images/gradient-spotify-easing.jpg"
           alt="spotify with easing gradient"
         >
       </a>

nuxt.config.js

@@ -70,13 +70,18 @@ module.exports = {
     ],
   },
   /*
+  ** Plugins
+  */
+  plugins: [{ src: '~/plugins/vue-lazyload', ssr: false }],
+  /*
   ** Customize the progress bar color
   */
   loading: false,
   /*
   ** Build configuration
   */
   build: {
+    vendor: ['vue-lazyload'],
     plugins: [
       new BundleAnalyzerPlugin({
         analyzerMode: 'static',

package-lock.json

@@ -53,6 +53,7 @@
     "push-dir": "^0.4.1",
     "throttleit": "^1.0.0",
     "vue-feather-icons": "^4.7.1",
+    "vue-lazyload": "^1.2.3",
     "vue-slider-component": "^2.6.2",
     "webpack-bundle-analyzer": "^2.11.1"
   }

package.json

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueLazyload from 'vue-lazyload'
+
+Vue.use(VueLazyload)

plugins/vue-lazyload.js

@@ -1,18 +1,19 @@
 {
-    "name": "Larsenwork",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ee2b7c",
-    "background_color": "#ee2b7c",
-    "display": "standalone"
-}
+  "name": "Larsenwork",
+  "short_name": "Larsenwork",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ee2b7c",
+  "background_color": "#ee2b7c",
+  "display": "standalone"
+}