解决viewer.js图片查看器一次性加载几十张卡顿问题

vue中使用viewer.js

npm install v-viewer –save
import Viewer from ‘v-viewer’

Viewer.setDefaults({
  Options: {
    'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source'
  },
  show: function () {
    this.viewer.options.interval = 2000
    setTimeout(() => {
      this.viewer.options.interval = 4000
    }, 1000)
    setTimeout(() => {

    }, 35000)

  },
  viewed () {

  }

这个插件很好，附加很多功能，但是我使用中遇到的最大一个问题就是图片查看卡顿问题，因为公司后台上传的图片都是1,2M的，所以一个栏目放100多张这样的图片，打开这个图片查看器基本卡主不动，网页崩溃，（图片压缩会失真，用定时器一次性加载10张也会出现很多问题，直接点击自动全屏播放不卡顿但有其他问题）,最后实现的办法就是首次加载16张，后面点击翻页的时候去加载一张，这样即使是多大的图片也不会卡顿，具体实现方法如下：

          <viewer :images="src" ref="viewer">
            <img v-for="(src1,i) in src" :key="i" :src="HTTP+src1" ref="images" objectFitImages />
          </viewer>

objectFitImages 这个是一个解决图片object-fit属性在ie中不兼容的问题

      await getEnterpriseCulture(this.model).then(res => {
        this.title = res.data.rows[0].Title
        this.year = res.data.rows[0].Year
        this.num = res.data.rows[0].Sheets
        this.imageSrc = []
        res.data.rows.map(item => {
          this.pictureItem.push(item)
          this.imageSrc = item.ImageUrl.split(',').slice(0, -1)
        })
        let n = 16
        let srcUrl = []
        this.imageSrc.slice(0, 16).map(item => {
          srcUrl.push(item)
        })
        this.src = srcUrl
        setTimeout(() => {
          let that = this
          console.log(this.$refs.viewer, this.$refs.viewer.$viewer, this.$refs.viewer.$viewer.options.viewed, 9)
          this.$refs.viewer.$viewer.options.viewed = function () {
            srcUrl.push(that.imageSrc.slice(n, n + 1)[0])
            that.src = srcUrl
            that.$refs.viewer.$viewer.update()
            n += 1
            if (that.src.length === that.imageSrc.length) {
              that.$refs.viewer.$viewer.options.viewed = function () { }
            }
          }
        }, 1000)
      }).catch(err => {
        this.$message.error(err.response.data)
      })

viewed事件在每次查看新的一张图片时都会触发一次，所以修改这个事件就能达到点击下一张去加载新的一张，这样一张一张加载，图片几M的也不会卡