img lazyload

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({

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>

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",

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": {