javascript - 为什么el-carousel的里面使用el-image的lazy属性会导致往右翻页的时候有几页空白，以及为什么el-carouselde的里面使用img的loading="lazy"属性不能够懒加载？

Question

问题1：为什么el-carousel的里面使用el-image的lazy属性会导致往右翻页的时候有几页空白？问题2：以及为什么el-carouselde的里面使用img的loading="lazy"属性不能够懒加载？

问题1：为什么el-carousel的里面使用el-image的lazy属性会导致往右翻页的时候有几页空白

在线演示

Element Plus Playground 1

示例代码

<script setup lang="ts">

</script>

<template>
   <div>
    <div style="width: 100%; height: 2000px; display: block">lazy load header</div>
    <el-carousel height="2000px">
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <el-image
              src="https://dummyimage.com/2000x2000/aaa/fff&text=2000x2000"
              lazy
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <el-image
              src="https://dummyimage.com/2000x2000/bbb/fff&text=2000x2000"
              lazy
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <el-image
              src="https://dummyimage.com/2000x2000/ccc/fff&text=2000x2000"
              lazy
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <el-image
              src="https://dummyimage.com/2000x2000/ddd/fff&text=2000x2000"
              lazy
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <el-image
              src="https://dummyimage.com/2000x2000/eee/fff&text=2000x2000"
              lazy
            />
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style>
</style>

尝试过把el-image换成img，el-image的lzy属性换成img的loading="lazy"，虽然没有了图片变成空白，但是图片懒加载并没有生效，而是在页面一打开在页面还没有滚动到轮播图的时候就加载了图片，期望得到的结果1在el-carouselde的里面使用el-image的lazy属性的时候往右翻页的时候不会有空白，期望得到的结果2在el-carouselde的里面使用img的loading="lazy"属性的时候能够懒加载

问题2：以及为什么el-carouselde的里面使用img的loading="lazy"属性不能够懒加载？

在线演示

Element Plus Playground 2

示例代码

<script setup lang="ts">

</script>

<template>
   <div>
    <div style="width: 100%; height: 2000px; display: block">lazy load header</div>
    <el-carousel height="2000px">
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/aaa/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/bbb/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/ccc/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/ddd/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/eee/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style>
</style>

暂时不知道如何尝试，期望的结果1：el-carousel的里面使用el-image的lazy属性会导致往右翻页的时候没有空白，期望的结果2：el-carouselde的里面使用img的loading="lazy"属性能够懒加载

Answer 1

<script setup>
import { ref, onMounted } from 'vue'

const imageUrls = [
  "https://dummyimage.com/2000x2000/aaa/fff&text=2000x2000",
  "https://dummyimage.com/2000x2000/bbb/fff&text=2000x2000",
  "https://dummyimage.com/2000x2000/ccc/fff&text=2000x2000",
  "https://dummyimage.com/2000x2000/ddd/fff&text=2000x2000",
  "https://dummyimage.com/2000x2000/eee/fff&text=2000x2000"
]

// 预加载所有图片
const preloadImages = () => {
  imageUrls.forEach(url => {
    const img = new Image()
    img.src = url
  })
}

onMounted(() => {
  preloadImages()
})
</script>

<template>
  <div>
    <div style="width: 100%; height: 2000px; display: block">lazy load header</div>
    <el-carousel height="2000px">
      <el-carousel-item v-for="(url, i) in imageUrls" :key="i">
        <el-row>
          <el-col :span="24">
            <el-image
              :src="url"
              fit="cover"
              style="width: 100%; height: 100%"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

问题2：

<script setup>
import { ref, onMounted } from 'vue'

const images = ref([])
const imageUrls = [
  "https://dummyimage.com/2000x2000/aaa/fff&text=2000x2000",
  // ...其他图片
]

onMounted(() => {
 
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      images.value = imageUrls
      observer.disconnect()
    }
  })
  
  observer.observe(document.querySelector('.carousel-container'))
})
</script>

<template>
  <div class="carousel-container">
    <el-carousel height="2000px">
      <el-carousel-item v-for="(url, index) in images" :key="index">
        <img :src="url" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>