vivo-ui/src/directives/img/index.js

vivo ui component lib for vue

import { prefixed } from '../../tools/prefix/index'

let durationName = prefixed('transitionDuration')

export default {
  inserted (el, binding) {
    el.tempImg = new window.Image()
    el.tempImg.onload = function () {
      el.setAttribute('src', this.getAttribute('src'))
      Object.assign(el.style, {
        opacity: 0,
        [durationName]: '0s'
      })
      clearTimeout(el.tempId)
      el.tempId = setTimeout(function () {
        Object.assign(el.style, {
          opacity: 1,
          [durationName]: '1s'
        })
      }, 17)
    }
    el.tempImg.onerror = function () {
      el.setAttribute('src', el.getAttribute('data-error-src'))
      Object.assign(el.style, {
        opacity: 0,
        [durationName]: '0s'
      })
      clearTimeout(el.tempId)
      el.tempId = setTimeout(function () {
        Object.assign(el.style, {
          opacity: 1,
          [durationName]: '1s'
        })
      }, 17)
    }
    // 显示loading图
    el.setAttribute('src', el.getAttribute('data-loading-src'))
    // 加载图片
    el.tempImg.src = binding.value
  },
  update (el, binding) {
    binding.value !== binding.oldValue && (el.tempImg.src = binding.value)
  }
}