html图片加载显示同意背景,监听CSS背景图片加载进度

今天在开发中发现背景图片很大，需要控制加载进度，如果是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)

}