Vue如何实现用户点击后才加载banner组件的对应图片

算力阿峰

2026-9-24

可行实现方案

你遇到的原生懒加载失效是因为loading="lazy"仅基于元素是否处于视口范围判断加载时机，即便banner默认隐藏，只要DOM节点已渲染且位置在视口内，浏览器就会提前加载所有图片，不符合你点击才加载的需求。可以选择以下任意一种方案实现：

方案1：条件渲染+激活状态控制（最稳妥）

通过父组件维护已点击的banner状态，仅激活的banner才渲染真实图片节点，完全避免提前请求：

父组件新增激活状态与点击回调：

// 父组件响应式状态
const activatedBanners = ref(new Set())
const handleBannerTrigger = (bannerId) => {
  activatedBanners.value.add(bannerId)
  // 此处保留你原有的banner显示/隐藏切换逻辑
}

遍历组件时传递激活状态，绑定点击事件：

<banner-base
    v-for="banner in entry.banners"
    :key="banner.id"
    :slug-ficha="slugSelected"
    :promo-selected="promoSelected"
    :banner-id="banner.id"
    :is-activated="activatedBanners.has(banner.id)"
    @click.native="handleBannerTrigger(banner.id)"
/>

banner-base内部通过v-if控制图片渲染，点击前可渲染本地占位图/空白占位块，不会触发远程资源请求：

<!-- banner-base 组件内部 -->
<div class="banner-container">
  <img v-if="isActivated" :src="你的banner图片地址" alt="banner">
  <div v-else class="banner-placeholder"></div>
</div>

方案2：动态赋值src属性

如果不希望切换DOM节点避免闪烁，可以将真实图片地址暂存在自定义属性中，点击后再赋值给src触发加载：

<!-- banner-base 组件内部 -->
<img 
  :data-real-src="你的banner图片地址"
  alt="banner"
  ref="bannerImgRef"
  @click="loadBannerImg"
>

// banner-base 内部逻辑
const bannerImgRef = ref(null)
const loadBannerImg = () => {
  if (bannerImgRef.value && !bannerImgRef.value.src) {
    bannerImgRef.value.src = bannerImgRef.value.dataset.realSrc
  }
  // 原有显示逻辑
}