html动态元素加载完毕事件,JS监听元素的加载完成/失败事件

〇、适用场景

在前端开发中，为了优化用户体验，我们经常有等背景图完成之后显示内容、加个遮罩等待页面加载完成之后消失等需求。

本文以下述的特殊情况(监听 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