资源预加载-preloadjs

text
mounted() {
    canvas2image = require('~/utils/canvas2image').default
    require('long-press-event')
    setupWebViewJavascriptBridge(bridge => {
      jsBridge = bridge
    })
    this.loadAsset()
    document.addEventListener('visibilitychange', () => {
      if (document.hidden && this.audio.instance) {
        this.audio.instance.paused = true
      } else if (
        !document.hidden &&
        this.audio.instance &&
        this.audio.instance.paused
      ) {
        this.audio.instance.paused = false
      }
    })
    document.body.addEventListener(
      'touchmove',
      function(e) {
        e.preventDefault()
      },
      { passive: false }
    )
    // window.eruda.init()
  },

text
loadAsset() {
      const preload = new window.createjs.LoadQueue(true)
      preload.installPlugin(window.createjs.Sound)
      // window.createjs.Sound.registerPlugins([window.createjs.HTMLAudioPlugin]) // need this so it doesn't default to Web Audio
​
      const manifest = Object.keys(this.theme)
        .filter(key => key !== 'name')
        .map(key => ({
          id: key,
          src: this.theme[key]
        }))
      const randomIndex = getRandomInt(0, musicList.length - 1)
      const music = musicList[randomIndex]
      this.audio.title = music.replace('.mp3', '')
      manifest.push({
        id: 'bgm',
        src: `https://static.juzicon.com/official/huodong/qixi/bgm/${music}`
      })
      preload.loadManifest(manifest)
​
      preload.on('progress', e => {
        this.loadingProgress = parseInt(e.loaded * 100, 10)
      })
      preload.on('complete', e => {
        this.loading = false
        setTimeout(() => {
          this.content2 = [...this.content]
        }, 1000)
        const backgroundImage = preload.getResult('backgroundImage', true)
        const cdImage = preload.getResult('cdImage', true)
        const shareBackgroundImg = preload.getResult('shareBackgroundImg', true)
        const cdArm = preload.getResult('cdArm', true)
        const previewBackgroundImg = preload.getResult(
          'previewBackgroundImg',
          true
        )
        this.loadedResources = {
          cdImage: window.URL.createObjectURL(cdImage),
          shareBackgroundImg: window.URL.createObjectURL(shareBackgroundImg),
          backgroundImage: window.URL.createObjectURL(backgroundImage),
          cdArm: window.URL.createObjectURL(cdArm),
          previewBackgroundImg: window.URL.createObjectURL(previewBackgroundImg)
        }
​
        const bgm = window.createjs.Sound.play('bgm', {
          loop: -1
        })
        this.audio.total = dayjs.duration(bgm.duration).format('mm:ss')
        this.audio.instance = bgm
        const callback = () => {
          // if (bgm.position >= 5000 && !this.rulesDialog.loaded) {
          //   this.rulesDialog.show = true
          //   this.rulesDialog.loaded = true
          // }
          this.audio.position = dayjs.duration(bgm.position).format('mm:ss')
          this.audio.percent = ((bgm.position / bgm.duration) * 100).toFixed(3)
          window.requestAnimationFrame(callback)
        }
        window.requestAnimationFrame(callback)
        this.$nextTick(async () => {
          const image = await this.convertToImage(this.$refs['canvas-preview'])
          this.previewDialog.image = image.src
          const image2 = await this.convertToImage(this.$refs.canvas)
          this.previewDialog.downloadImage = image2.src
        })
      })
    },

加载字体

text
manifest.push({
  src: [
    {
      src:
      "local('Songti SY'), url(https://static.juzicon.com/fonts/SourceHanSerifCN-Bold.otf) format('woff')",
      family: 'Songti SY'
    },
    {
      src:
      "local('Handwrit SC'), url(https://static.juzicon.com/fonts/%E6%89%8B%E5%86%99%E4%BD%93/ShouShuti.woff2) format('woff')",
      family: 'Handwrit SC',
      weight: 'bold'
    }
  ],
  type: 'font',
  injectCSS: true
})