Added: gallery lazy-load

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

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>

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)

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"