From 46189d2f34bdea42e035b25645c027e57586b526 Mon Sep 17 00:00:00 2001
From: Molunerfinn <marksz@teamsz.xyz>
Date: Tue, 26 Jun 2018 21:11:04 +0800
Subject: [PATCH] Added: gallery lazy-load

---
 package.json                                    | 1 +
 src/renderer/components/SettingView/Gallery.vue | 2 +-
 src/renderer/main.js                            | 3 +++
 yarn.lock                                       | 4 ++++
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 486260c..7dec2e6 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "vue": "^2.3.3",
     "vue-electron": "^1.0.6",
     "vue-gallery": "^1.2.4",
+    "vue-lazyload": "^1.2.6",
     "vue-router": "^2.5.3",
     "vuex": "^2.3.1"
   },
diff --git a/src/renderer/components/SettingView/Gallery.vue b/src/renderer/components/SettingView/Gallery.vue
index e795bd2..20185cb 100644
--- a/src/renderer/components/SettingView/Gallery.vue
+++ b/src/renderer/components/SettingView/Gallery.vue
@@ -37,7 +37,7 @@
           <el-col :span="6" v-for="(item, index) in images" :key="item.id" class="gallery-list__img">
             <div 
               class="gallery-list__item"
-              :style="{ 'background-image': `url(${item.imgUrl})` }"
+              v-lazy:background-image="item.imgUrl"
               @click="zoomImage(index)"
             >
             </div>
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 528a83c..fc96128 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -9,7 +9,10 @@ import db from '../datastore/index'
 import { webFrame } from 'electron'
 import './assets/fonts/iconfont.css'
 import picBed from '../datastore/pic-bed'
+import VueLazyLoad from 'vue-lazyload'
+
 Vue.use(ElementUI)
+Vue.use(VueLazyLoad)
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 webFrame.setLayoutZoomLevelLimits(0, 0)
diff --git a/yarn.lock b/yarn.lock
index a162c2a..aea955b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8106,6 +8106,10 @@ vue-html-loader@^1.2.4:
     loader-utils "^1.0.2"
     object-assign "^4.1.0"
 
+vue-lazyload@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.2.6.tgz#baa04c172d52a812608eb12c7a6bfb14f5c91079"
+
 vue-loader@^13.0.5:
   version "13.5.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.5.0.tgz#52f7b3790a267eff80012b77ea187a54586dd5d4"