〇、适用场景
在前端开发中,为了优化用户体验,我们经常有等背景图完成之后显示内容、加个遮罩等待页面加载完成之后消失等需求。
本文以下述的特殊情况(监听 background-image 的加载)为主,当然也通用于各种需要监听加载完成、失败事件的场景。
特例—— background-image 的特殊处理
由于 css 中的 background-image 会在 DOM 加载完成之后,再进行加载,所以我们无法直接使用 document 的加载完成事件进行监听。
目前看来,主流的解决方案是在文档流中添加一个隐藏的图片,这个图片和背景图片的路径是相同的。然后利用以下两个特性来实现:文档流中的元素会先于 css 中的图片加载
图片加载完成一次之后,再次使用会读取缓存
一、原生JavaScript解决方案
1. 在 HTML 中加入 img 标签实现预加载
HTML部分
JS部分var preload = document.getElementById('preload');
preload.onload = preload.onreadystatechange = function(){
if(!this.readyState||this.readyState==='loaded'||th