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>