js监听gif停止 libgif-js Gif 操作（开始，暂停，移动帧...) 功能强大

 

这件事的起因是因为一个需求，需要 监听 gif 完成然后跳转到登录页，百度了很多都没有找到类似的教程，在自己强大的搜索能力下，还是找到了，细节看下面。

github.com/buzzfeed/li…  框架地址，功能挺强大的，具体使用方法可以查看文档，因为工作原因，就不一一列出实列了，只贴实际使用的代码，如果有使用的问题的话，可以共同交流一下。

<template>
    <img ref="img">
</template>

<script>
import '../../static/js/libgif.js'
import RubbableGif from '../../static/js/rubbable'

export default {
  name: 'Gif',
  props: {
    imgUrl: String // 实列：../../static/gif/tenor.gif
  },
  async mounted () {
    try {
      // 通过异步函数，获取gif文件
      let fetchImg = await fetch(this.imgUrl)

      fetchImg.blob().then(blob => {
        // 通过 FileReader 读取文件数据，获取 Base64
        let reader = new FileReader()
        reader.onloadend = () => {
          this.$refs.img.src = reader.result // 输出DataURL数据

          // 检测gif 是否完成
          let rubbableGif = new RubbableGif({
            gif: this.$refs.img,
            on_end: () => {
              // 监听gif 完成后，发送一个事件，通知父组件
              this.$emit('gifFinish')
            }
          })
          rubbableGif.load()
        }
        reader.readAsDataURL(blob) // 将blob数据转换成DataURL数据
      })
    } catch (e) {
      console.error('程序错误', e)
    }
  }
}
</script>

<style scoped>

</style>
复制代码

转载于：https://juejin.im/post/6844903733235548174