From db3cff9d47879dda5c1058d73a39d811b7a792b3 Mon Sep 17 00:00:00 2001
From: Milos Stojanovic <alcalbg@gmail.com>
Date: Fri, 21 Feb 2020 13:04:34 +0100
Subject: [PATCH] img lazyload

---
 frontend/main.js                    | 6 ++++++
 frontend/views/partials/Preview.vue | 2 +-
 package-lock.json                   | 5 +++++
 package.json                        | 1 +
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/main.js b/frontend/main.js
index b4a220a..293051c 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -6,6 +6,7 @@ import Buefy from 'buefy'
 import shared from './mixins/shared'
 import axios from 'axios'
 import api from './api/api'
+import VueLazyload from 'vue-lazyload'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 
@@ -25,6 +26,11 @@ Vue.use(Buefy, {
   defaultIconPack: 'fas',
 })
 
+Vue.use(VueLazyload, {
+  preLoad: 1.3,
+})
+
+
 Vue.mixin(shared)
 
 new Vue({
diff --git a/frontend/views/partials/Preview.vue b/frontend/views/partials/Preview.vue
index b485687..1d83573 100644
--- a/frontend/views/partials/Preview.vue
+++ b/frontend/views/partials/Preview.vue
@@ -19,7 +19,7 @@
             <div v-if="images.length > 1" class="column is-one-fifth sidebox">
               <ul>
                 <li v-for="(image, index) in images" :key="index">
-                  <img :src="imageSrc(image.path)" @click="currentItem = image">
+                  <img v-lazy="imageSrc(image.path)" @click="currentItem = image">
                 </li>
               </ul>
             </div>
diff --git a/package-lock.json b/package-lock.json
index 64153b0..c066cc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16095,6 +16095,11 @@
         "vue-template-es2015-compiler": "^1.6.0"
       }
     },
+    "vue-lazyload": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.3.3.tgz",
+      "integrity": "sha512-uHnq0FTEeNmqnbBC2aRKlmtd9LofMZ6Q3mWvgfLa+i9vhxU8fDK+nGs9c1iVT85axSua/AUnMttIq3xPaU9G3A=="
+    },
     "vue-loader": {
       "version": "15.8.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.8.3.tgz",
diff --git a/package.json b/package.json
index 1f8d3bb..36d6dc9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "core-js": "^3.4.4",
     "js-base64": "^2.5.1",
     "prismjs": "^1.19.0",
+    "vue-lazyload": "^1.3.3",
     "vue-prism-editor": "^0.5.1"
   },
   "devDependencies": {