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>
複製代碼