这个问题困扰我有一段时间了。对于整个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=$("<div></div>");
div1.waitLayout().then((rect)=>{
console.log("加载完成",rect);
});
$("body").append(div1); //输出 "加载完成 DOMRect..."
//测试2-加载到主DOM树时隐藏，然后显示
var div2=$("<div></div>");
div2.waitLayout().then((rect)=>{
console.log("加载完成",rect);
});
div2.css("display","none");
$("body").append(div2);
div2.css("display","unset"); //输出 "加载完成 DOMRect..."
//测试2-加载到隐藏的父节，然后显示父节点
var div3=$("<div></div>");
var div3_container=$("<div></div>");
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></div>");
div.waitLayout().then((rect)=>{
console.log("加载完成",rect);
});
}
性能显示如下：
image.png
