如何判断某个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=$("<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