应用场景:
页面刚加载时,显示的是png格式的图标,当鼠标放上去的时候,切换成为gif的动图,一般我们会想到使用hover进行切换图标,但是这样就会导致gif会直接展示最后一帧,因为gif已经被浏览器加载进内存了,再次读取的时候,会直接从内存读取。所以我们可以在图片的后边加上时间戳或者随机数,然后使用@mouseenter和@mouseleave事件进行控制鼠标移动到图标和离开图标的操作
<div class = "img-div">
<!-- :src = "`${rxImg + '?+=' +new Date().getTime()}`" (加时间戳)-->
<img class="img-rw"
:src = "`${rxImg + '?tempid=' +Math.random()}`"
@mouseenter="rxGif()"
@mouseleave="rxPng()"
/>
</div>
<script>
export default{
data(){
return{
rwImg: require("@/assets/img/test.png")
}
},
methods:{
rxGif(){
this.rwImg = require("@/assets/img/test.gif")
} ,
rxPng(){
this.rwImg = require("@/assets/img/test.png")
}
}
}
</script>