html加载状态,如何判断某个HTML元素加载完成

这个问题困扰我有一段时间了。对于整个Document的加载可以通过load或DOMContentLoaded事件来判断，而对于某个DIV我们该如何获取加载完成的通知呢？

用一个问题场景来说明一下。页面初始化时通过脚本加载了一个DIV，通过display:none;隐藏起来，当需要的时候再显示。这样一来DIV脱离了文档流，浏览器不会计算其大小和位置。如果DIV内部有一个子模块需要通过计算容器的大小进行绘制，只能通过显示这个DIV的时点触发一个消息来进行绘制。而在某些模块化设计的场景下，我们需要子模块更加内聚，去相应这样一个外部事件是不合适的。我们希望在这个DIV元素被绘制的时候再进行子模块的绘制。

经过对MDN手册的逐条阅读后，我找到了一个方法 :

Element.getClientRects()

这个方法返回元素绘制后的DomRect对象。如果元素没有绘制则返回null。找到了这个关键方法后，我们需要建立一个通知机制。我选用Promise。代码如下：

$.fn.extend({

'waitLayout':function(){

var self=this;

return new Promise(function(resolve,reject){

var _fn_check_layout=function(){

var rect_list=self[0].getClientRects();

if(rect_list.length===0){

window.setTimeout(_fn_check_layout,100);

}else{

resolve(rect_list[0]);

}

};

window.setTimeout(_fn_check_layout);

});

}

});

//测试1-直接加载到主DOM树

var div1=$("

div1.waitLayout().then((rect)=>{

console.log("加载完成",rect);

});

$("body").append(div1); //输出 "加载完成 DOMRect..."

//测试2-加载到主DOM树时隐藏，然后显示

var div2=$("

div2.waitLayout().then((rect)=>{

console.log("加载完成",rect);

});

div2.css("display","none");

$("body").append(div2);

div2.css("display","unset"); //输出 "加载完成 DOMRect..."

//测试2-加载到隐藏的父节，然后显示父节点

var div3=$("

var div3_container=$("

div3.waitLayout().then((rect)=>{

console.log("加载完成",rect);

});

div3_container.css("display","none");

$("body").append(div3_container);

div3_container.append(div3);

div3_container.css("display","unset"); //输出 "加载完成 DOMRect..."

这个方法有一个缺陷。setTimeout循环有可能导致性能问题。我们用100个元素来测试一下。

for(var i=0;i<100;i++){

var div=$("

div.waitLayout().then((rect)=>{

console.log("加载完成",rect);

});

}

性能显示如下：

image.png