IntersectionObserver实现图片懒加载

TIPS

在查阅资料翻译后，会提供IntersectionObserver的完整介绍。案例仅为小demo，如有不足还望指出

图片懒加载

图片懒加载的常规实现原理是通过计算文档被卷去的高度、文档可视区域的高度、元素的距离浏览器顶部的距离，判断图片是否在可视区域，但是此种方式有较大弊端，一是频繁监测这些信息比较消耗性能，二是在页面被打开后，如果初始显示区域不是文档的最顶部，那么所有出现在可视区域及被文档卷去的部分的图片都会进行加载，并不能完全满足我们对图片懒加载的要求。

IntersectionObserver

可以称之为观察器，可以自动观测元素是否可见。其可以完全解决常规的图片懒加载所导致的一些问题。实例的observe方法可以指定观察哪个DOM节点

基本的语法很简单

// new IntersectionObserver(callback)
let io = new IntersectionObserver(entries => {
// entries保留的是所有被监测的元素对象产生的观察者IntersectionObserverEntry
  console.log(entries)
  entries.forEach(entry => {
  // 遍历entries可以得到每一个被监测的元素对象产生的观察者
  // 观察者里提供了一系列的属性
  // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry
    console.log(entry)
  })
})
i0.observe(document.querySelector('.xxx'))
</