1. <template>
    2.   <div>
    3.     <div v-for="item,index in data" :key="item.id">
    4.       <img :data-img="item.img" :data-key="index" :data-lazy-img-list="index" />
    5.     </div>
    6.   </div>
    7. </template>
    10. <script setup lang="ts">
    11.   import { nextTick ,onMounted} from 'vue';
    12.   const data=[{
    13.     img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
    14.     title: '36分钟,深圳平均通勤时间出炉!GDP10强城市中仅输杭州',
    15.     evaluate: (Math.random() * 10).toFixed(2),
    16.     collection: (Math.random() * 100).toFixed(2),
    17.     price: (Math.random() * 10).toFixed(2),
    18.     monSales: (Math.random() * 20).toFixed(2),
    19.     id: 1,
    20.     loading: true,
    21.   }]
    24.   const lazyImg = (el: any, arr: any) => {
    25.     const io = new IntersectionObserver((res) => {
    26.       res.forEach((v: any) => {
    27.         if (v.isIntersecting) {
    28.           const { img, key } = v.target.dataset;
    29.           v.target.src = img;
    30.           v.target.onload = () => {
    31.             io.unobserve(v.target);
    32.             arr[key]['loading'] = false;
    33.           };
    34.         }
    35.       });
    36.     });
    37.     nextTick(() => {
    38.       document.querySelectorAll(el).forEach((img) => io.observe(img));
    39.     });
    40.   };
    41.   onMounted(() => {
    42.     lazyImg('[data-lazy-img-list]',data)
    43.   })
    46. </script>
    49. <style scoped></style>