今天在开发中发现背景图片很大，需要控制加载进度，如果是img可以很好的监听到，但是在css中我们该如何操作呢

首先是提取CSS背景图的地址，然后通过js监听加载进度

加载图片

这是监控图片加载是否完成的核心部分，最后返回一个promise

export const loadImage = url => new Promise((resolve, reject) => {
 
  let image = new Image()
  image.onload = () => {
    resolve(url)
    image = undefined
  }
  image.onerror = () => reject(url)
  image.src = url
})

批量加载图片

根据传入进来的url加载，可以是一个数组，也可以是一个字符串，最后返回一个promise

export const loaderUrls = (params) => {
  let urls = []
  switch (Object.prototype.toString.call(params)) {
    case '[object String]':
      urls = [params]
      break
    case '[object Array]':
      urls = [...params]
      break
    default:
      urls = []
  }

  const promiseAll = urls.map(url => loadImage(url))

  return Promise.all(promiseAll)
}

提取图片地址

在css中的图片要使用特殊的方法提取，提取出来的地址是 url(http://xxxxx)所以要截取字符串

export const cssUrl = (ele) => {
  const urlPre = window.getComputedStyle(ele).backgroundImage

  return urlPre.substring(5, urlPre.length - 2)
}

批量提取图片地址并批量加载图片

在元素中批量提取图片地址，也可以是单个元素（仅支持div标签），并调用批量加载图片方法

export const eleLoaderImages = (eles) => {
  let urls = []
  switch (Object.prototype.toString.call(eles)) {
    case '[object HTMLDivElement]':
      urls = cssUrl(eles)
      break
    case '[object Array]':
      urls = eles.map(ele => cssUrl(ele))
      break
    default:
      urls = []
  }

  return loaderUrls(urls)
}