目录
什么是延迟加载
浏览器在打开页面时，如果页面上有img或iframe时，需要等等对应资源加载完，整个页面才能被完成加载。这会导致整个页面加载的事件变长，此时我使用延迟加载（惰性加载），先加载整个页面，部分资源等到要看到了才加载。
传统方法-监听滚动条
在img标签中，真实路径存放在data-src，src则存放加载图片或者占位图片，通过监听滚动条滚动事件，计算图片和视窗位置，当图片将进入或已进入，将图片的src替换为真实路径，实现延迟加载。由于时监听事件比较低效，因为它会在非常短的时间内触发无数事件。而我们需要获取图片位置，每次调用getBoundingClientRect()都会迫使浏览器重新布局整个页面。
Intersection Observer
在2016年时，chrome就开始支持这个API，后续也有不少的浏览器支持。Intersection Observer API 提供了一种异步检测目标元素与祖先元素或视口相交情况变化的方法。
监听滚动条的方法中还有一个弊端，但我们有在引用其他库是，如果有多个库中都是监听滚动事件，但当用户滚动页面时，这些相交检测程序就会在页面滚动回调函数里不停触发调用，造成性能问题，体验效果让人失望。。而Intersection Observer API 会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时(或者 viewport )，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。这样，我们网站的主线程不需要再为了监听元素相交而辛苦劳作，浏览器会自行优化元素相交管理。
而此时我们可以利用图片和视窗的相交情况，等到图片进入或者即将进入视窗的时候再加载图片，实现延迟加载。Intersection Observer API 文档
支持情况：
原生延迟加载
原生懒加载超级简单，loading在您的img或iframe标签上添加属性。可以选择的值lazy，eager和auto。
- lazy: 用于使用延迟加载。
- eager: 直接加载。
- auto: 浏览器会选择是否延迟加载。
这种延迟加载的方式非常简单，使用起来很容易。
不过需要比较新的浏览器才支持
参考
Native Lazy Loading in the Browser
Lazy-Load Images With the Intersection Observer