diff --git a/index.html b/index.html
index e1350c5222ed7f3dac736d3a3e494f9141228119..5a7d2a31556517a6d0d97ad6a226f7569d309a50 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,7 @@
             <div class="section-wrapper">
                 💓 💖
             </div>
+            <div v-scope="ImgBox({imgName:'DSCF8222.jpg'})"></div>
         </section>
         <section class="section-row">
             <div class="section-wrapper">
@@ -209,18 +210,7 @@
         </div>
     </template>
      <template id="imgbox-template">
-        <div class="bounbottom-popupter-gift-list">
-            <div class="gift-list-container">
-                <div v-for="(item, index) in giftList" :key="index" :class="((item?'gift-list-item ': ' ')+(item.class?item.class:''))">
-                    <div class="gift-list-avatar"><img :src="item.avatar"/></div>
-                    <div class="gift-list-content">{{item.text}}</div>
-                    <div class="gift-list-gift-img">
-                        <img :src="item.giftImg"/>
-                        <img :src="item.giftImg2"/>
-                    </div>
-                </div>
-            </div>
-        </div>
+         <img :src="imgSrc" :data-src="dataSrc"/>
     </template>
     <script type="module" src="/src/main.ts"></script>
 
diff --git a/src/section/components/imgbox/index.ts b/src/section/components/imgbox/index.ts
index 9242d068d7c774b6bda27e4c692f059bb0e248ac..5d8dcb9cc806c64a40cf1bfb756522e078cc2044 100644
--- a/src/section/components/imgbox/index.ts
+++ b/src/section/components/imgbox/index.ts
@@ -1,4 +1,4 @@
-let imgMap = {
+let imgNameMap = {
     "DSCF7995.jpg": "https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250324100029689-1902352921.jpg",
     "DSCF8019.jpg": "https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250324100053386-972327104.jpg",
     "DSCF8027.jpg": "https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250324100058175-827552871.jpg",
@@ -36,9 +36,28 @@ let imgMap = {
     "DSCF8365.jpg": "https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250324100709204-1857305680.jpg"
 }
 
-export function ImgBox(props:any){
+       const observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    const realSrc = img.dataset.src;
+                    const imgObj = new Image();
+                    imgObj.src = realSrc;
+                    imgObj.onload = () => {
+                        img.src = realSrc;
+                        observer.unobserve(img);
+                    };
+                }
+            });
+        });
+
+export function ImgBox(props:any={}){
+    console.log("yyy",this)
+    let imgSrc = imgNameMap[props.imgName]
+    let dataSrc = imgNameMap[props.imgName]
     return {
         $template:'#imgbox-template',
-        imgSrc: ''
+        imgSrc: imgSrc,
+        dataSrc: dataSrc,
     }
 }
\ No newline at end of file
diff --git a/src/section/components/index.ts b/src/section/components/index.ts
index b1875d9db95c29c4691682342e3331713d3b00b6..987a1f2b716bef515f4cda40de59afebb9a06615 100644
--- a/src/section/components/index.ts
+++ b/src/section/components/index.ts
@@ -1,8 +1,9 @@
 import { CountDown } from "./countdown/index"
 import { WeddingCalendar } from "./wedding-calendar/index"
-
+import {ImgBox} from "./imgbox/index"
 
 export default {
     CountDown,
     WeddingCalendar,
+    ImgBox,
 }
\ No newline at end of file