Mon Mar 24 13:12:00 CST 2025 inscode

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>
 

src/section/components/imgbox/index.ts

-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

src/section/components/index.ts

 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