class/LoadImg.js

/**
 * @description 渐显加载图片。
 * @example
 * // 使用
 * let img = new LoadImg(document.querySelector('#img'))
 * img.setSrc('./a.jpg').then(callback)
 */

export class LoadImg {
  constructor (el) {
    this.el = el
    el.addEventListener('load', this.showImg)
  }

  setSrc (src) {
    return new Promise(resolve => {
      requestAnimationFrame(() => {
        Object.assign(this.el.style, {
          opacity: 0,
          visibility: 'hidden'
        })
        requestAnimationFrame(() => {
          this.el.src = src
        })
      })
      this.resolve = resolve
    })
  }

  show = e => {
    const el = e.target

    setTimeout(() => {
      Object.assign(el.style, {
        opacity: 1,
        transition: 'opacity 0.5s ease',
        visibility: 'visible'
      })

      el.addEventListener('transitionend', () => {
        Object.assign(el.style, {
          transition: 'initial'
        })
        this.resolve && this.resolve()
        this.resolve = null
      })
    }, 300)
  }
}