关于el-carousel组件内img标签loading="lazy"属性懒加载失效的技术咨询

嘿，我来帮你捋一捋为什么在el-carousel里用img的loading="lazy"会失效，再给你几个实用的解决思路：

首先说核心原因，主要是这两点：

• 轮播组件的预渲染逻辑：Element Plus的el-carousel默认会把所有轮播项（包括还没轮到显示的）都渲染到DOM里，这些隐藏的轮播项一般是靠CSS的transform或者透明度来隐藏，不是真的从DOM中移除。而浏览器的原生懒加载loading="lazy"，是根据元素是否在视口可见范围或者即将进入视口的区域来触发加载，但carousel里的隐藏图片，它们的布局位置可能被浏览器判定为“在视口范围内”（比如所有轮播项都堆在同一个容器高度里），所以浏览器直接就把所有图片都加载了，不会等你切换到它的时候再触发懒加载。
• 组件的内部资源预加载机制：为了让轮播切换更流畅，el-carousel可能会悄悄提前预加载所有轮播项里的资源，这就直接覆盖了原生loading="lazy"的行为，强制图片提前加载了。

接下来给你几个可行的解决办法，你可以根据自己的项目情况选：

• 自己实现基于轮播状态的懒加载：监听el-carousel的change事件，当某个轮播项切换到激活状态时，再给对应的img设置真实的src（比如先把图片地址存在data-src里，切换的时候再赋值给src）。举个简单的代码例子：

  <el-carousel @change="onCarouselChange">
    <el-carousel-item v-for="(item, idx) in carouselList" :key="idx">
      <img :src="item.isActive ? item.imgUrl : ''" :data-src="item.imgUrl" alt="轮播图">
    </el-carousel-item>
  </el-carousel>
  
  <script setup>
  import { ref } from 'vue'
  const carouselList = ref([
    { imgUrl: 'your-image-1.jpg', isActive: true },
    { imgUrl: 'your-image-2.jpg', isActive: false },
    { imgUrl: 'your-image-3.jpg', isActive: false }
  ])
  
  const onCarouselChange = (activeIndex) => {
    carouselList.value.forEach((item, idx) => {
      item.isActive = idx === activeIndex
      if (item.isActive && item.imgUrl === '') {
        item.imgUrl = item.dataSrc
      }
    })
  }
  </script>
  

• 用Element Plus自带的el-image懒加载：直接用el-image组件的懒加载功能，它和el-carousel的适配性更好，毕竟是一套生态里的。用法很简单，把img换成el-image，加上lazy属性就行：

  <el-carousel-item>
    <el-image :src="yourImageUrl" lazy alt="轮播图" />
  </el-carousel-item>
  

  它会根据轮播项的可见状态来触发加载，不会提前加载所有图片。
• 让轮播项延迟渲染：如果你的Element Plus版本支持的话，给el-carousel-item加上lazy属性，这样轮播项只会在即将被切换到的时候才渲染到DOM里，这时候原生的loading="lazy"就能正常工作了：

  <el-carousel>
    <el-carousel-item v-for="item in yourList" :key="item.id" lazy>
      <img :src="item.imgUrl" loading="lazy" alt="轮播图">
    </el-carousel-item>
  </el-carousel>
  

另外要注意，不同版本的Element Plus API可能有小差异，你可以对照自己项目用的版本的官方文档来调整哦~

备注：内容来源于stack exchange，提问作者gongsikai