添加懒加载插件

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@jambonn/vue-lazyload": "^1.0.8",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.6",
@@ -17,6 +18,7 @@
     "pinyin": "^2.9.0",
     "swiper": "^6.7.5",
     "vue": "^3.0.0",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^4.0.8",
     "vue-switches": "^2.0.1",
     "vuex": "^4.0.1"

src/components/Posters.vue

@@ -3,7 +3,8 @@
     <div class="poster-item" v-for="i in list">
 <!--       @click="$nav('/video-detail')"-->
 <!--      <img class="poster" :src="$imgPreview(i.video.cover.url_list[3])" alt="">-->
-      <img class="poster" :src="$imgPreview(i.cover)" alt="">
+      <img class="poster"  v-lazy="$imgPreview(i.cover)" alt="">
+<!--      <img class="poster" :src="$imgPreview(i.cover)" alt="">-->
       <div class="num" v-if="mode === 'normal'">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
         <span>{{ $likeNum(i.digg_count) }}</span>

src/main.js

@@ -7,13 +7,23 @@ import api from './api'
 import router from "./router";
 import store from "./store";
 import mixin from "./utils/mixin";
+import VueLazyload from '@jambonn/vue-lazyload'
+
 
 const app = Vue.createApp(App)
 app.config.globalProperties.$api = {...api}
 // app.config.compilerOptions.isCustomElement = tag => tag.startsWith('video1')
-app.provide('mitt', mitt())
 
+
+const loadImage = require('./assets/img/icon/img-loading.png')
+
+app.provide('mitt', mitt())
 app.mixin(mixin)
+app.use(VueLazyload, {
+  preLoad: 1.3,
+  loading: loadImage,
+  attempt: 1
+})
 app.use(router)
 app.use(store)
 app.mount('#app')

src/pages/home/Music.vue

@@ -7,7 +7,6 @@
           <span class="f16">MT创作的原声</span>
         </div>
       </transition>
-
       <div class="right">
 <!--        TODO　没有淡入淡出的特效-->
         <img class="star" v-if="isFixed" src="../../assets/img/icon/star-white.png" alt="">