pc端增加懒加载功能

web/package-lock.json

@@ -14,6 +14,7 @@
         "swiper": "^4.5.1",
         "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
+        "vue-lazyload": "^1.3.3",
         "vue-router": "^3.2.0"
       },
       "devDependencies": {
@@ -13216,6 +13217,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",
@@ -25257,6 +25263,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",

web/package.json

@@ -13,7 +13,8 @@
     "swiper": "^4.5.1",
     "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",

web/src/components/eight.vue

@@ -3,7 +3,7 @@
     <div class="comTit">{{ tit }}</div>
     <div class="comMani" :class="{ swShow: !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="rowRight">
           <div class="txt">
             <p :title="item.name"><span>建筑名称：</span>{{ item.name }}</p>
@@ -62,7 +62,7 @@
                 >
                   <img
                     class="detailImgSonImg"
-                    :src="baseURL + item.filePath"
+                     v-lazy="baseURL + item.filePath"
                     alt=""
                   />
                 </div>

web/src/components/five.vue

@@ -17,7 +17,7 @@
         <video
           class="sroolStop"
           controls
-          :src="baseURL + item.filePath"
+           :src="baseURL + item.filePath"
         ></video>
       </div>
     </div>

web/src/components/four.vue

@@ -28,7 +28,7 @@
                     <img src="../assets/img/videoPlay.png" alt="" />
                   </div>
                 </div>
-                <video controls :src="baseURL + item.filePath"></video>
+                <video controls  :src="baseURL + item.filePath"></video>
               </div>
 
               <div
@@ -37,7 +37,7 @@
                 @click="$emit('openLook', baseURL + item.filePath, 'img')"
                 :key="item.id"
               >
-                <img :src="baseURL + item.filePath" alt="" />
+                <img  v-lazy="baseURL + item.filePath" alt="" />
               </div>
             </div>
           </div>

web/src/components/one.vue

@@ -20,7 +20,7 @@
                   <img src="../assets/img/videoPlay.png" alt="" />
                 </div>
               </div>
-              <video :src="baseURL + item.filePath"></video>
+              <video  :src="baseURL + item.filePath"></video>
             </div>
 
             <!-- 每个节点 -->
@@ -30,7 +30,7 @@
               @click="$emit('openLook', baseURL + item.filePath, 'img')"
               :key="item.id"
             >
-              <img :src="baseURL + item.filePath" alt="" />
+              <img  v-lazy="baseURL + item.filePath" alt="" />
             </div>
           </div>
 

web/src/components/seven.vue

@@ -3,7 +3,7 @@
     <div class="comTit">{{ tit }}</div>
     <div class="comMani">
       <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 :title="item.txt1"><span>编号：</span>{{ item.txt1 }}</p>
           <p :title="item.txt2"><span>类型：</span>{{ item.txt2 }}</p>
@@ -55,7 +55,7 @@
                 >
                   <img
                     class="detailImgSonImg"
-                    :src="baseURL + item.filePath"
+                     v-lazy="baseURL + item.filePath"
                     alt=""
                   />
                 </div>

web/src/components/six.vue

@@ -5,14 +5,14 @@
       <div class="conShow">
         <div class="conShowTop">
           <img
-            :src="baseURL + bigSrc"
+             v-lazy="baseURL + bigSrc"
             alt=""
             v-if="type === 'img' && bigSrc"
             @click="$emit('openLook', baseURL + bigSrc, 'img')"
           />
           <video
             controls
-            :src="baseURL + bigSrc"
+             :src="baseURL + bigSrc"
             v-if="type === 'video' && bigSrc"
           ></video>
         </div>
@@ -29,7 +29,7 @@
                 :key="item.id"
               >
                 <div class="videoName" :title="item.name">{{ item.name }}</div>
-                <video :src="baseURL + item.filePath"></video>
+                <video  :src="baseURL + item.filePath"></video>
               </div>
 
               <!-- 每个节点 -->
@@ -40,7 +40,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>
 

web/src/components/three.vue

@@ -6,7 +6,7 @@
       <div class="conShow">
         <div class="conShowTop">
           <img
-            :src="baseURL + bigSrc"
+            v-lazy="baseURL + bigSrc"
             alt=""
             v-if="type === 'img' && bigSrc"
             @click="$emit('openLook', baseURL + bigSrc, 'img')"
@@ -47,7 +47,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>
 

web/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 ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);

web/src/views/stair/index.vue

@@ -196,8 +196,8 @@ export default {
   }
   .rightCM {
     position: absolute;
-    top: 50px;
-    left: 20px;
+    top: 240px;
+    right: 20px;
   }
   .conMain {
     height: 400px;
@@ -265,7 +265,7 @@ export default {
     display: flex;
     position: absolute;
     bottom: 55px;
-    left: 30px;
+    left: 80px;
     .btnRow {
       position: relative;
       cursor: pointer;