Vue3组合式API：满足条件时从头播放GIF动画的解决方法

问题原因 #

Chrome浏览器会缓存GIF动画的播放状态，即便通过v-if销毁重建组件，浏览器仍会复用已缓存的资源状态，导致后续显示时动画从上次暂停的位置继续播放；而Firefox的缓存策略不同，因此表现正常。

解决方案 #

方案1：动态修改GIF URL（添加随机参数）

通过在GIF的URL后追加随机参数（如时间戳），让浏览器每次都识别为新资源，从而强制从头播放动画。

修改SpinnerLoader组件：

<template>
  <div>
    <img :src="dynamicSpinnerUrl" class="custom-size" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import baseSpinnerUrl from '@/assets/spinnerUrl.gif';

// 生成带时间戳参数的动态URL
const dynamicSpinnerUrl = computed(() => {
  return `${baseSpinnerUrl}?t=${Date.now()}`;
});
</script>

注意：该方法会触发资源的重复请求，若GIF体积较小则影响可忽略，大体积GIF建议优先选择其他方案。

方案2：挂载时重置img播放状态

利用Vue生命周期钩子，在组件每次挂载时重置img元素的src属性，先清空再重新赋值，迫使动画从头启动。

修改SpinnerLoader组件：

<template>
  <div>
    <img ref="spinnerImg" :src="spinnerUrl" class="custom-size" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import spinnerUrl from '@/assets/spinnerUrl.gif';

const spinnerImg = ref<HTMLImageElement | null>(null);

onMounted(() => {
  if (spinnerImg.value) {
    const originalSrc = spinnerImg.value.src;
    // 先清空src再重新赋值，触发播放重置
    spinnerImg.value.src = '';
    spinnerImg.value.src = originalSrc;
  }
});
</script>

该方法无需额外请求资源，仅重置播放状态，性能更优。

方案3：结合v-show与key属性（可选）

若不想使用v-if销毁组件，可改用v-show，同时给组件绑定key属性，当isLoading状态变化时强制组件重建，配合上述任一方案即可解决问题：

父组件修改：

<template>
  <div>
    <SpinnerLoader v-show="isLoading" :key="isLoading" />
    <!-- some more code -->
  </div>
</template>

验证 #

修改后在Chrome中测试，每次isLoading变为true时，GIF动画都会从头开始播放，同时保持Firefox中的正常表现。

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