解决gif图片只加载一次的问题

最新推荐文章于 2024-07-02 16:44:40 发布

C_fashionCat

最新推荐文章于 2024-07-02 16:44:40 发布

阅读量2.3k

点赞数 2

分类专栏： vue 文章标签： html5

本文链接：https://blog.youkuaiyun.com/C_fashionCat/article/details/118181245

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种解决浏览器缓存导致一次性GIF动效无法正常显示的方法，通过添加时间戳来避免图片缓存。在Vue.js组件中，当状态变化时，动态更新带有时间戳的图片源，确保每次都能加载到新的图片，从而实现GIF动效的每次播放。同时，这种方法可能会引起短暂的空白闪烁，需要注意在实际应用中的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于浏览器对图片有缓存的机制，所以对于一次性型的gif图，只会加载动效一次，后面再次使用时就不会出现我们想要的效果，因此我们需要解决这种缓存问题，可以使用添加时间戳的问题让浏览器认为这不是同一张gif图，从而再次加载图片，实现每次都有动效。

代码：

<img v-show="show" :src="onceImg" />

<script>
export default {
	name: 'home',
	data() {
		return {
			show: true,
			state: 'fail', // 状态的变化
		}
	},
	watch: {
		state: {
			immediate: true,
			handler(val) {
	        if(val === 'fail') {
	          this.onceImg = `open.gif?+${new Date().getTime()}`;
	          this.show = true;
	          setTimeout(() => {
	            this.show = false;
	          }, 1030)
	        }
	      }
		}
	}
}
</script>