From d2483aeb4730891c296843b728c965f5e28688b2 Mon Sep 17 00:00:00 2001
From: Jelf <okxiaoliang4@gmail.com>
Date: Thu, 9 Feb 2023 13:57:35 +0800
Subject: [PATCH 1/2] feat(H5): `image` support `lazy-load` props

---
 .../uni-components/src/vue/image/index.tsx    | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/uni-components/src/vue/image/index.tsx b/packages/uni-components/src/vue/image/index.tsx
index 5e1093f1f88..f409f91b6ae 100644
--- a/packages/uni-components/src/vue/image/index.tsx
+++ b/packages/uni-components/src/vue/image/index.tsx
@@ -135,7 +135,32 @@ function useImageLoader(
     state.origHeight = height
     state.imgSrc = imgSrc
   }
-  const loadImage = (src: string) => {
+
+  const observer = ref<IntersectionObserver>()
+  const cleanupObserver = () => {
+    if (observer.value) {
+      observer.value?.disconnect()
+      observer.value = undefined
+    }
+  }
+  const lazyLoadImage = (src: string) => {
+    resetImage()
+    setState()
+    if (!observer.value) {
+      observer.value = new IntersectionObserver(([{ isIntersecting }]) => {
+        if (isIntersecting) {
+          _loadImage(src)
+          cleanupObserver()
+        }
+      })
+      observer.value.observe(state.rootEl!)
+    }
+  }
+
+  const loadImage = (src: string) =>
+    props.lazyLoad ? lazyLoadImage(src) : _loadImage(src)
+
+  const _loadImage = (src: string) => {
     if (!src) {
       resetImage()
       setState()

From 63064a0a6f5e3499e5670f0e29764bc4de7fbd26 Mon Sep 17 00:00:00 2001
From: Jelf <okxiaoliang4@gmail.com>
Date: Thu, 9 Feb 2023 14:01:02 +0800
Subject: [PATCH 2/2] feat(H5): when unmount cleanup `image` observer.

---
 packages/uni-components/src/vue/image/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/uni-components/src/vue/image/index.tsx b/packages/uni-components/src/vue/image/index.tsx
index f409f91b6ae..1dfffeb01d9 100644
--- a/packages/uni-components/src/vue/image/index.tsx
+++ b/packages/uni-components/src/vue/image/index.tsx
@@ -217,7 +217,10 @@ function useImageLoader(
     }
   )
   onMounted(() => loadImage(state.src))
-  onBeforeUnmount(() => resetImage())
+  onBeforeUnmount(() => {
+    cleanupObserver()
+    resetImage()
+  })
 }
 
 const isChrome = __NODE_JS__ ? false : navigator.vendor === 'Google Inc.'