日常开发

package-lock.json

@@ -26,6 +26,7 @@
         "speak-tts": "^2.0.8",
         "swiper": "^11.1.4",
         "vue": "^3.4.21",
+        "vue-lazyload": "^3.0.0",
         "vue-router": "^4.0.13"
       },
       "devDependencies": {
@@ -7633,6 +7634,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-lazyload": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-3.0.0.tgz",
+      "integrity": "sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug=="
+    },
     "node_modules/vue-router": {
       "version": "4.3.2",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.3.2.tgz",
@@ -13328,6 +13334,11 @@
         }
       }
     },
+    "vue-lazyload": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-3.0.0.tgz",
+      "integrity": "sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug=="
+    },
     "vue-router": {
       "version": "4.3.2",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.3.2.tgz",

package.json

@@ -30,6 +30,7 @@
     "speak-tts": "^2.0.8",
     "swiper": "^11.1.4",
     "vue": "^3.4.21",
+    "vue-lazyload": "^3.0.0",
     "vue-router": "^4.0.13"
   },
   "devDependencies": {

src/main.ts

@@ -7,6 +7,7 @@ import api from './api';
 import utils from './utils';
 import plugins from './plugins/index';
 import animate from './utils/animate';
+import VueLazyload from 'vue-lazyload';
 import './router/permission';
 
 // 自定义指令
@@ -31,6 +32,11 @@ app.use(router);
 app.use(plugins);
 //缓存数据
 app.use(store);
+//图片懒加载
+app.use(VueLazyload, {
+    preLoad: 1.3,
+    attempt: 1,
+});
 // 自定义指令
 directive(app);
 app.mount('#app');

src/views/ranking/index.vue

@@ -43,7 +43,7 @@
                             items.rank }}</i>
                         <div class="userInfo">
                           <div class="touxiang">
-                            <img v-if="items.logo_url" :src="items.logo_url" />
+                            <img v-if="items.logo_url" v-lazy="items.logo_url"/>
                             <img v-else :src="logo" />
                           </div>
                           <div class="nameBox">
@@ -83,7 +83,7 @@
               <div class="item" :class="{ one: index == 0, two: index == 1, three: index == 2 }"
                 @click="openReport(item)" v-for="(item, index) in studentTop" :key="index">
                 <div class="touxiang">
-                  <img v-if="item.logo_url" :src="item.logo_url" />
+                  <img v-if="item.logo_url" v-lazy="item.logo_url" />
                   <img v-else :src="logo" />
                 </div>
                 <div class="txt">