Feat： 非遗加载优化，渐进式加载图片，使得整体感觉页面顺畅

pkg_product/views/heritage.vue

@@ -1,9 +1,28 @@
 <template>
   <view class="pkg-product-heritage">
-    <image style="width: 100%" :src="topImage" mode="widthFix" />
+    <view class="top-image-wrap">
+      <image
+        style="width: 100%"
+        :src="topImage"
+        mode="widthFix"
+        :class="{ loaded: topImageLoaded }"
+        class="top-image"
+        @load="handleTopImageLoad"
+      />
+    </view>
     <view class="main-box" id="main-box">
-      <image style="width: 100%" :src="backgroundImage" mode="widthFix" @load="loadImg" />
+      <view class="bg-image-wrap">
+        <image
+          style="width: 100%"
+          :src="backgroundImage"
+          mode="widthFix"
+          class="bg-image"
+          :class="{ loaded: bgImageLoaded }"
+          @load="loadImg"
+        />
+      </view>
       <view
+        v-if="showItems"
         class="item"
         :style="{ left: item.gx + 'rpx', top: item.gy + 'rpx' }"
         v-for="(item, index) in contents"
@@ -14,6 +33,7 @@
           class="img-item"
           :src="item.image"
           :class="{ unlink: !item.isLink }"
+          lazy-load
         />
         
       </view>
@@ -40,6 +60,9 @@ export default {
       topImage: "",
       backgroundImage: "",
       bgImgWidth: 0,
+      topImageLoaded: false,
+      bgImageLoaded: false,
+      showItems: false,
       pageKeyId: Object.freeze("ichIndex"),
     };
   },
@@ -53,7 +76,14 @@ export default {
     this.queryGuide('ichIndex')
   },
   methods: {
+    handleTopImageLoad() {
+      this.topImageLoaded = true
+    },
     loadImg(e) {
+      this.bgImageLoaded = true
+      this.$nextTick(() => {
+        this.showItems = true
+      })
       this.queryGuide('ichIndex')
     },
     showFunctionGuide() {
@@ -125,6 +155,9 @@ export default {
     },
     init() {
       getICH().then(({ data }) => {
+        this.topImageLoaded = false
+        this.bgImageLoaded = false
+        this.showItems = false
         this.contents = data.contents;
         this.topImage = data.topImage;
         this.backgroundImage = data.backgroundImage;
@@ -178,6 +211,24 @@ export default {
     vertical-align: middle;
   }
 
+  .top-image-wrap,
+  .bg-image-wrap {
+    background: #f6f6f6;
+    overflow: hidden;
+  }
+
+  .top-image,
+  .bg-image {
+    display: block;
+    opacity: 0;
+    transition: opacity .25s ease;
+  }
+
+  .top-image.loaded,
+  .bg-image.loaded {
+    opacity: 1;
+  }
+
   .main-box {
     position: relative;
 
@@ -188,6 +239,7 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
+      will-change: transform;
       .title {
         position: relative;
         width: fit-content;