懒加载

src/views/components/carouselChart.vue

@@ -16,7 +16,7 @@
           <img v-if="index == 0" :src="item.path + '!1330x670'" />
           <img
             v-else
-            src="../../assets/img/nopic.jpg"
+            src="../../assets/img/loading.jpg"
             :data-src="item.path + '!1330x670'"
             class="swiper-lazy"
           />
@@ -45,12 +45,29 @@
         v-for="(item, index) in terminalPhoto"
         :key="item.id"
       >
+        <div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
+          <!-- <img :src="item.path + '!1330x670'" alt="" /> -->
+          <img v-if="index == 0" :src="item.path + '!260x160'" />
           <img
-          :src="item.path + '!260x160'"
+            v-else
+            src="../../assets/img/loading.jpg"
+            :data-src="item.path + '!260x160'"
+            class="swiper-lazy"
+          />
+        </div>
+        <div class="bigimg" v-else>
+          <img :src="item.path" alt="" />
+        </div>
+        <!-- <img v-if="index == 0" :src="item.path + '!1330x670'" />
+
+        <img
+          src="item.path + '!260x160'"
           alt=""
-          v-if="item.path.indexOf('nopic') == -1"
+          :data-src="item.path + '!260x160'"
+          class="swiper-lazy"
+          v-else-if="item.path.indexOf('nopic') == -1"
         />
-        <img :src="item.path" alt="" v-else />
+        <img :src="item.path" alt="" v-else /> -->
         <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
           {{ $moment(item.photoTime).format("HH:mm:ss") }}({{
             $moment(item.recvTime).format("HH:mm:ss")
@@ -107,6 +124,17 @@ export default {
         touchRatio: 0.2,
         lazyLoading: true, //懒加载开启
         slideToClickedSlide: true,
+        lazy: {
+          loadPrevNext: true,
+          loadPrevNextAmount: 3,
+          loadOnTransitionStart: true,
+          //loadOnTransitionStart: true,
+        },
+        observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        observeParents: true, //修改swiper的父元素时，自动初始化swiper
+        onSlideChangeEnd: function (swiper) {
+          swiper.update();
+        },
         //loop: true,
         //loopedSlides: 4,
       },

src/views/realTimeMonitor/index.vue

@@ -102,7 +102,7 @@
               <el-button type="primary" @click="handleShowErr"
                 >声光报警</el-button
               >
-              <el-button type="primary" @click="handleShowErr"
+              <el-button type="primary" @click="handlehistoryPic"
                 >历史图片</el-button
               >
 
@@ -407,6 +407,11 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    //历史图片
+    handlehistoryPic() {
+      this.$router.push({ path: "/realTimeSearch" });
+      // sessionStorage.setItem("keyPath", " realTimeSearch");
+    },
     //图片绘制
     handlePanel() {
       //const nodes = this.$refs.tree.getNode(this.currentNodekey).data; //若节点可被选择，则返回目前被选中的节点所组成的数组