fix: 优化长图展示

- 在图片未完全展示完成但是高度已经确定的时候开始跳转

src/views/service/views/service-info.vue

@@ -44,15 +44,15 @@ export default {
         }
     },
     watch: {
-        // 监听路由参数变化
-        '$route.params': {
-            handler(newParams) {
-                if (newParams.position) {
-                    this.scrollToBlock();
-                }
-            },
-            immediate: true
-        },
+        // // 监听路由参数变化
+        // '$route.params': {
+        //     handler(newParams) {
+        //         if (newParams.position) {
+        //             this.scrollToBlock();
+        //         }
+        //     },
+        //     immediate: true
+        // },
         // 监听当前块position变化
         'currentBlockId': function (newId) {
             if (newId) {
@@ -74,16 +74,16 @@ export default {
 
                 // 使用setTimeout确保 DOM 已经完全渲染
                 this.$nextTick(() => {
-                    setTimeout(() => {
-                        const element = document.getElementById(`block-${position}`);
-                        if (element) {
-                            // 滚动到元素位置
-                            window.scrollTo({
-                                top: element.offsetTop - 70,  // 偏移70px给顶部留出空间
-                            });
-                            this.hasScrolled = true;
-                        }
-                    }, 800); // 添加短暂延迟确保DOM已更新
+                    // setTimeout(() => {
+                    const element = document.getElementById(`block-${position}`);
+                    if (element) {
+                        // 滚动到元素位置
+                        window.scrollTo({
+                            top: element.offsetTop - 70,  // 偏移70px给顶部留出空间
+                        });
+                        this.hasScrolled = true;
+                    }
+                    // }, 800); // 添加短暂延迟确保DOM已更新
                 });
             }
         },
@@ -98,10 +98,27 @@ export default {
                     position: position
                 }
             })
+        },
+        handleImageLoad() {
+            const images = document.querySelectorAll('.block-image');
+            const loadPromises = Array.from(images).map(img => {
+                return new Promise(resolve => {
+                    const checkInterval = setInterval(() => {
+                        if (img.naturalHeight > 0) {
+                            clearInterval(checkInterval);
+                            resolve();
+                        }
+                    },50);
+                });
+            });
+
+            Promise.all(loadPromises).then(() => {
+                this.scrollToBlock()
+            });
+
         }
-    },
-    mounted() {
-        this.scrollToBlock();
+    }, mounted() {
+        this.handleImageLoad()
     }
 }
 </script>