逻辑_gif图片在每次页面打开时恢复到第一帧播放-Toy模板网

这篇具有很好参考价值的文章主要介绍了逻辑_gif图片在每次页面打开时恢复到第一帧播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在页面嵌入一个gif动画，每次进入页面时先展示gif动画(UI可以控制GIF图片为单次不循环播放)。

<van-popup
  v-model="showGuidance"
  position="bottom"
  class="ship-guidance"
  :style="{ height: '100%' }"
>
<img src="https://img.iwave.net.cn/kw/6ce6251bff300c66843ca0cad5dfb68f.gif" alt="" class="guidance" id="gifimg"/>
</van-popup>

<script>
export default {
  data () {
    return {
      showGuidance: false
    }
  },
  mounted () {
    this.showGuidance = true
    setTimeout(() => {
      this.showGuidance = false
    }, 6100) // gif时长6s
    setTimeout(() => {
      window.scrollTo(0, 150)
    }, 4000) // 第4s时页面配合向上滑动
  }
}
</script>

.ship-guidance{
  .guidance{
    width: 100vw;
    height: 100vh;
    object-fit: contain;
  }
}

---------------------------渲染页面-------------------------

发现页面第一次打开(或刷新页面)时能正常展示，当打开其他页面再返回该页面时gif会从上次播放的最后一帧开始继续播放！

这违背了我的初衷，因此想了一下解决办法：文章来源地址https://www.toymoban.com/news/detail-679584.html

[1] 每次gif展示完毕将元素删除display:none

const gifimg = document.getElementById('gifimg')
gifimg.style.display = 'block'
setTimeout(() => {
  this.showGuidance = false
  gifimg.style.display = 'none'
}, 6100)
setTimeout(() => {
  window.scrollTo(0, 150)
}, 4000)

无作用：此时从其他页面返回依旧是从上次播放的最后关头一帧开始播放。

[2] 每次将src属性重新赋值

const gifimg = document.getElementById('gifimg')
gifimg.src = 'https://img.iwave.net.cn/kw/6ce6251bff300c66843ca0cad5dfb68f.gif'
setTimeout(() => {
  this.showGuidance = false
  gifimg.src = ''
}, 6100)
setTimeout(() => {
  window.scrollTo(0, 150)
}, 4000)