网页开发时，常常需要了解某个元素是否进入了'视口'，即用户能不能看到它。
目前有一个新的 IntersectionObserver API，可以自动'观察'元素是否可见，Chrome 51+ 已经支持。由于“可见”的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做'交叉观察器'。
var io = new IntersectionObserver(callback, option);IntersectionObserver：是浏览器原生提供的构造函数接受两个参数 callack:回调函数 什么时候回调？“可见性变化时的回调函数” callback一般会触发两次。一次是目标元素刚刚进入视口，另一次是完全离开视口。 ）
可配置两个重要的参数： threshold 属性决定了什么时候触发回调函数，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。 rootMargin 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量 默 认0.
// 开始观察 元素是否到可视区 io.observe(document.getElementByIdx_x('example')); // 停止观察 io.unobserve(element); // 关闭观察器 io.disconnect();
懒加载其实就是延迟加载。通俗的讲就是，当你访问一个页面的时候，先不设置img元素或者其他元素的background-image的图片的src（还有其他的懒加载形式），只有当它们进入视口的才开始加载，这样可能节省带宽从而提高网页性能，页面加载速度更加快、减轻服务器的压力。
一般懒加载实现的方法为不设置资源文件的src，而把真是的url放置在data-url（也可根据自己喜好设置）属性里面，这样在载入页面的时候不会对资源文件发起请求。当网页滚动条滚动到需要加载这个标签的时候，设置真实的url从而开始加载资源文件。