图片懒加载

JavaScript 方案

todo

HTML5 方案

3

2

1

开始加载...

<template>
  <div class="h-200 scroll-y">
    <div class="h-200">3</div>
    <div class="h-200">2</div>
    <div class="h-200">1</div>
    <div class="h-200">开始加载...</div>
    <img
      v-for="item of 10"
      :key="item"
      src="https://dummyimage.com/200x200"
      height="200"
      width="200"
      loading="lazy"
      decoding="async"
      @load="onload"
    />
  </div>
</template>

<script setup>
function onload(e) {
  console.log('加载完毕', e)
}
</script>