使用JS判断css设置的背景图是否加载成功

如果你也遇到过类似的问题，希望小菜鸟的这篇文章能帮到你

原本需求是，点击小标题，切换背景图，

因为使用vue技术栈，所以我的解决方案是在data中require所有背景图，然后在小标题的点击事件中修改style

结果是效果出来了，但是切换的时候会出现瞬间的空白。

最终解决了这个瞬间空白问题-----使用img的complete属性

核心代码部分如下

在vue的data中

imgArr=［

require('@/assets/0.png'),

reuqire('@/assets/1.png'),

require('@/assets/2.png')

]

在点击事件的函数中

let newArr=this.imgArr

var img = new Image();

img.src＝newArr［index］

let  imgLoad ＝setInterval(()=>{

if(img.complete){

document.getElementById(xx).style.background=`url(${newArr［index］}) no-repeat center`

clearInterval(imgLoad)

}

}，300)