From 31055b8c64e7d336477fc8971af2084e8a0528a7 Mon Sep 17 00:00:00 2001
From: Allen K Abraham <allen@theabstraction.co>
Date: Sun, 17 May 2020 03:24:00 +0530
Subject: [PATCH] Lazy Loading Images Implemented

---
 nuxt.config.js                  |  5 +++--
 package-lock.json               |  5 +++++
 package.json                    |  3 ++-
 pages/faculties/index.vue       | 27 +++++++++++++++++++++------
 plugins/vue-progessive-image.js |  4 ++++
 5 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 plugins/vue-progessive-image.js

diff --git a/nuxt.config.js b/nuxt.config.js
index 7d38a6f..9b135b5 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -33,7 +33,8 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
-    {src: '@/plugins/materialize.js',ssr: false}
+    {src: '@/plugins/materialize.js',ssr: false},
+    {src: '@/plugins/vue-progessive-image.js',ssr: false}
   ],
   /*
   ** Nuxt.js dev-modules
@@ -48,7 +49,7 @@ export default {
   modules: [
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
-    '@nuxtjs/style-resources'
+    '@nuxtjs/style-resources',
   ],
   /*
   ** Axios module configuration
diff --git a/package-lock.json b/package-lock.json
index aa54c9f..32ddfcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11786,6 +11786,11 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "vue-progressive-image": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/vue-progressive-image/-/vue-progressive-image-3.2.0.tgz",
+      "integrity": "sha512-D1DSBOIw2nAJHTDT2aVn2lDROKGd4XvCIIH5JY2t5yjNcDppRXzqXRqrGYRFcRbtA+6XV17s55VszFFItiNLcg=="
+    },
     "vue-router": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
diff --git a/package.json b/package.json
index b02d941..35f1996 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "@nuxtjs/style-resources": "^1.0.0",
     "frontmatter-markdown-loader": "^3.4.2",
     "jquery": "^3.5.1",
-    "nuxt": "^2.0.0"
+    "nuxt": "^2.0.0",
+    "vue-progressive-image": "^3.2.0"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^2.0.0",
diff --git a/pages/faculties/index.vue b/pages/faculties/index.vue
index f2a7144..90f9860 100644
--- a/pages/faculties/index.vue
+++ b/pages/faculties/index.vue
@@ -11,7 +11,13 @@
         <div class="col s12 m4 l6">
           <div class="card-panel hoverable">
             <div class="card-image center-align">
-              <img class="circle responsive-image" :src="`${c.url || '/download.png'}`">
+              <progressive-img
+                class="faculty-img circle responsive-image"
+                :src="`${c.url || '/download.png'}`"
+                placeholder="/download.png"
+                :alt="`${c.name}`"
+                :blur="30"
+              />
             </div>
             <div class="card-content center-align text">
               <p style="font-size:20px">
@@ -35,6 +41,7 @@
 </template>
 <script>
 import axios from 'axios'
+
 export default {
   async asyncData (context) {
     return await axios
@@ -49,6 +56,19 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.faculty-img {
+  width: 225px !important;
+  height: 225px !important;
+
+  img {
+    width: 225px!important;
+    height: 225px!important;
+    object-fit: cover;
+  }
+}
+</style>
 <style lang="scss" scoped>
 .card-panel {
   border-radius: 16px 16px 16px 16px;
@@ -60,11 +80,6 @@ export default {
   font-weight: bold;
   font-size: 16px;
 }
-img {
-  width: 225px;
-  height: 225px;
-  object-fit: cover;
-}
 a:hover {
   text-decoration: underline;
 }
diff --git a/plugins/vue-progessive-image.js b/plugins/vue-progessive-image.js
new file mode 100644
index 0000000..a1a3bb6
--- /dev/null
+++ b/plugins/vue-progessive-image.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueProgressiveImage from 'vue-progressive-image'
+
+Vue.use(VueProgressiveImage)