【文件属性】：
文件名称：lazyImage:使用interSectionObserver API异步加载图片
文件大小：194KB
文件格式：ZIP
更新时间：2021-04-27 17:02:03
HTML
lazy-observer-load
使用interSectionObserver API异步加载图片
当前懒加载图片的方法
要想知道当前是否需要加载一张图片，我们需要坚持当前页面可见范围内这张图片是否可见。如果是，则加载。
检查方法：我们可以通过事件和事件处理器来监测页面滚动位置、offset值、元素高度、视窗高度并计算出这张图片是否在可见视窗内。
但是，这样做也有几点副作用：
由于所有的计算将在JS的主线程进行，因此可能会带来性能问题；
每次执行滚动时，以上计算都会执行一遍，如果我们的图片在最底部的，无形间浪费了很多资源；
如果页面中有很多图片，这些计算将会十分占用资源。
一个更加现代化的解决方案
提供了一种方法，可以异步观察目标元素与祖先元素或顶层文件的交集变化。
通过Intersection Observer API实现的懒加载主要包括以下几个步骤：
创建一个intersectio
【文件预览】：
lazyImage-master
----css()
--------index.css(336B)
----README.md(1KB)
----images()
--------dog-running.svg(889B)
--------dog-battersea.jpg(46KB)
--------dog-face.jpg(42KB)
--------dog-battersea.svg(902B)
--------dog-face.svg(921B)
--------dog-running.jpg(110KB)
----js()
--------load.js(2KB)
----index.html(2KB)