为什么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"属性能够懒加载