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从而开始加载资源文件。
