应用场景:在作者的项目中的业务场景是有一个重复多个.gif图的页面,这个.gif图存在多种状态,通过Websocket接收到的值切换不同图片更换状态,如果这个重复的gif图用的是一个地址,那么有一个切换状态时,就会发生所有相同状态的gif图重新加载的问题,看起来就像是卡了。这样存在重复多个gif图在页面上,我们不可能去导入多个图片,每个图片的名称都修改,这样费时费力费内存,可以选择的是在可以将gif图先导入应用的vue文件中,动态在src地址后面拼接唯一标识,如果回切换的,建议拼接对应图片唯一性标识,不采用时间戳去拼接,否则会造成内存溢出。
<body><imgv-show="item.state==1"src="@/assets/image/stop.png"alt=""<!--下面使用:src="runGif+'?'+item.id"动态的在图片地址后面拼接唯一标识。不拼接时间戳,频繁切换不会导致页面内存溢出--><imgv-show="item.state==2":src="runGif+'?'+item.id"alt=""></body><script>import runGif from '@/assets/image/xxx.gif';created() {this.runGif = runGif;},</script>
希望对有需要的各位有帮助