移动端增加懒加载功能

webM/package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.6.5",
         "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
+        "vue-lazyload": "^1.3.3",
         "vue-router": "^3.2.0"
       },
       "devDependencies": {
@@ -13116,6 +13117,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-lazyload": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
+    },
     "node_modules/vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.9.8.tgz",
@@ -25065,6 +25071,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
+    },
     "vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.9.8.tgz",

webM/package.json

@@ -11,7 +11,8 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "v-viewer": "^1.5.1"
+    "v-viewer": "^1.5.1",
+    "vue-lazyload": "^1.3.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

webM/src/components/five.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="main" :class="{ opcBase: conShowLoad }">
       <div class="row" v-for="item in data" :key="item.id">
-        <img :src="baseURL + imgSrc(item)" alt="" />
+        <img v-lazy="baseURL + imgSrc(item)" alt="" />
         <div class="txt">
           <p><span>编号：</span>{{ item.txt1 }}</p>
           <p><span>类型：</span>{{ item.txt2 }}</p>
@@ -56,7 +56,7 @@
               >
                 <img
                   class="detailImgSonImg"
-                  :src="baseURL + item.filePath"
+                  v-lazy="baseURL + item.filePath"
                   alt=""
                 />
               </div>

webM/src/components/one.vue

@@ -36,7 +36,7 @@
             v-for="item in data.images"
             :key="item.id"
           >
-            <img :src="baseURL + item.filePath" alt="" />
+            <img v-lazy="baseURL + item.filePath" alt="" />
           </div>
         </div>
       </div>

webM/src/components/one2.vue

@@ -36,7 +36,7 @@
             v-for="item in data.images"
             :key="item.id"
           >
-            <img :src="baseURL + item.filePath" alt="" />
+            <img v-lazy="baseURL + item.filePath" alt="" />
           </div>
         </div>
       </div>

webM/src/components/six.vue

@@ -8,7 +8,7 @@
     <div class="main" :class="{ opcBase: conShowLoad }">
       <div class="mainSm" :style="`height:${domHei}px`"></div>
       <div class="row" v-for="item in data" :key="item.id">
-        <img :src="baseURL + imgSrc(item)" alt="" />
+        <img v-lazy="baseURL + imgSrc(item)" alt="" />
         <div class="txtBox">
           <div class="txt">
             <p><span>建筑名称：</span>{{ item.name }}</p>
@@ -65,7 +65,7 @@
               >
                 <img
                   class="detailImgSonImg"
-                  :src="baseURL + item.filePath"
+                  v-lazy="baseURL + item.filePath"
                   alt=""
                 />
               </div>

webM/src/components/three.vue

@@ -31,7 +31,7 @@
             v-for="item in data.images"
             :key="item.id"
           >
-            <img :src="baseURL + item.filePath" alt="" />
+            <img v-lazy="baseURL + item.filePath" alt="" />
           </div>
         </div>
       </div>

webM/src/components/three2.vue

@@ -31,7 +31,7 @@
             v-for="item in data.images"
             :key="item.id"
           >
-            <img :src="baseURL + item.filePath" alt="" />
+            <img v-lazy="baseURL + item.filePath" alt="" />
           </div>
         </div>
       </div>

webM/src/main.js

@@ -1,6 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+// 图片懒加载
+import VueLazyLoad from 'vue-lazyload'
+Vue.use(VueLazyLoad, {
+  error: require('@/assets/img/IMGerror.png'),
+  loading: require('@/assets/img/loading2.gif')
+})
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 Vue.use(Viewer)

webM/src/utils/request.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 const service = axios.create({
   // baseURL: 'http://192.168.0.135:8016', // 本地调试
-  baseURL: 'http://project.4dage.com:8016', // 线上调试
-  // baseURL: '', // build
+  // baseURL: 'http://project.4dage.com:8016', // 线上调试
+  baseURL: '', // build
   timeout: 5000
 })
 // 请求拦截器