Nuxt环境下v-carousel切换轮播项时跳帧问题如何解决

问题根因 #

你遇到的跳帧问题核心有两点：

1. asyncData仅获取到了图片的URL字符串，没有实际触发图片资源的下载，浏览器只有当img标签被渲染到DOM中时才会发起图片请求
2. v-carousel默认会延迟渲染未激活的轮播项，只有切换到对应轮播页时才会把v-carousel-item内的img插入DOM，此时才开始加载图片，图片加载过程中高度未确定，就会出现先缩小再撑开的跳帧现象

解决方案 #

• 方案1：开启轮播项强制提前渲染（推荐，改动最小）
  给所有v-carousel-item添加eager属性，会让组件初始化时就渲染所有轮播项的DOM，所有图片会在页面加载阶段就发起请求，切换时直接调用已加载的资源，不会出现加载延迟。修改后代码如下：

<template>
<v-container class="hero-wrapper">
  <v-carousel
    cycle
    hide-delimiters
    height="auto"
    >
    <v-carousel-item
      v-for="(item,i) in heroImages"
      :key="i"
      class="pb-0 mb-0"
      :href="item.link"
      eager
      >
      <img :src="item.image" class="hero-image">
    </v-carousel-item>
  </v-carousel>
</v-container>
</template>

<script>
export default {
    props: ["heroImages"]
}
</script>

如果轮播图数量少于10张，优先选择该方案。

• 方案2：手动预加载图片资源
  如果轮播图数量较多，全部提前渲染会拖慢首屏加载速度，可以在组件挂载阶段手动预加载所有图片到浏览器缓存，不需要提前渲染所有轮播项：

<template>
<v-container class="hero-wrapper">
  <v-carousel
    cycle
    hide-delimiters
    height="auto"
    >
    <v-carousel-item
      v-for="(item,i) in heroImages"
      :key="i"
      class="pb-0 mb-0"
      :href="item.link"
      >
      <img :src="item.image" class="hero-image">
    </v-carousel-item>
  </v-carousel>
</v-container>
</template>

<script>
export default {
    props: ["heroImages"],
    mounted() {
      // 预加载所有轮播图到浏览器缓存
      this.heroImages.forEach(item => {
        const img = new Image()
        img.src = item.image
      })
    }
}
</script>

• 方案3：固定图片容器宽高比（兜底优化）
  不管用上述哪种方案，都建议给轮播图片加固定宽高比样式，就算图片未加载完成，容器也会占住对应高度，完全避免跳帧：

.hero-wrapper {
  width: 100%;
}
.hero-image {
  width: 100%;
  height: auto;
  /* 按照你的轮播图比例调整，这里示例为16:9 */
  aspect-ratio: 16/9;
  object-fit: cover;
}

内容的提问来源于stack exchange，提问作者hipsterstomper69