使用imgage 对象来预加载

const imgPreloader = url => {
  return new Promise((resolve, reject) => {
    let image = new Image()
    image.src = url
    image.onload = () => {
      // console.log('img load success')
      let json = {
        code: 200,
        data: image.src
      }
      resolve(json)
    }
    image.onerror = () => {
      // console.log('img load fail')
      let json = {
        code: 201,
        msg: '图片加载失败'
      }
      reject(new Error(json))
    }
  })
}
const imgsPreloader = imgs => {
  let promiseArr = []
  imgs.forEach(item => {
    promiseArr.push(imgPreloader(item))
  })
  return Promise.all(promiseArr)
}
export default imgsPreloader

使用

await imgsPreloader([homeBg]).then(res => {
      if (res[0].code === 200) {
        Vue.prototype.$BgImg = res[0].data
      } else {
        Vue.prototype.$BgImg = null
      }
    })