前端监听元素是否在显示区域

前端页面在加载的时候，如果数据量过大，会导致页面白屏时间过长，后端生成模板的方式，白屏时间大量消耗在解析DOM结构；如果使用前端框架，页面DOM结构简单；但是项目内会存在大量接口请求并创建渲染视图， 如果单页面功能复杂，数据量大，渲染的结构复杂时，会出现大量等待效果。

如果能对元素进行监听，当元素出现在可视区域时，才会做相关操作，不在可视区域时，可以限制相关功能或数据更新等。

对于Android系统或者谷歌等内核提供 IntersectionObserver 接口； 其他不兼容的可以时间监听 onscroll事件，实时去校验元素是否在可视区域范围内。

1.  IntersectionObserver 接口

        初始化监听器

var intersectionObserver = new IntersectionObserver(function(entries) {
  // entries 包含被监听的元素对象集合
  for(var i=0,l=entries.length;i<l;i++){
    console.log(entries[i]);
    // 判断是否进入可视区域的判断条件: intersectionRatio > 0
    // intersectionRatio   0 : 标识未进入可视区域 0.5: 有一半进入可视区域 1: 完全进入可视区域
    // target  当前监听的元素ElementHTML
  }
});

        开始监听元素 

// 设置需要监听的元素ElementHTML, 当前监听的元素会在上面监听器内的entrie