5分钟掌握IntersectionObserver

1、网页开发时，常常需要了解某个元素是否进入了"视口"，即用户能不能看到它。

2、目前有一个新的 IntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于“可见”的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。

1、var io = new IntersectionObserver(callback, option);

IntersectionObserver：是浏览器原生提供的构造函数

接受两个参数

    callack:回调函数    

                              什么时候回调？“可见性变化时的回调函数”  callback一般会触发两次。一次是目标元素刚刚进入视口，另一次是完全离开视口。

                               ）

1、可配置两个重要的参数：

                   threshold    属性决定了什么时候触发回调函数，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。

                   rootMargin  一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量 默 认0.

1、 // 开始观察 元素是否到可视区

   io.observe(document.getElementByIdx_x('example'));

  // 停止观察

  io.unobserve(element);

  // 关闭观察器

  io.disconnect();

1、懒加载其实就是延迟加载。通俗的讲就是，当你访问一个页面的时候，先不设置img元素或者其他元素的background-image的图片的src（还有其他的懒加载形式），只有当它们进入视口的才开始加载，这样可能节省带宽从而提高网页性能，页面加载速度更加快、减轻服务器的压力。

1、一般懒加载实现的方法为不设置资源文件的src，而把真是的url放置在data-url（也可根据自己喜好设置）属性里面，这样在载入页面的时候不会对资源文件发起请求。当网页滚动条滚动到需要加载这个标签的时候，设置真实的url从而开始加载资源文件。