图片懒加载——非框架，使用JS(两种方法)

事件监听

1. 监听scroll这个事件，鼠标滚动就触发
2. window.innerHeight是窗口显示区的高度
3. getBoundingClientRect().top获取图片到视口上方的高度
4. 图片若未能显示到屏幕上:说明getBoundingClientRect().top大于window.innerHeight
5. data-src：不知道要在哪里下载图片。等到真正需要加载图片的时候，获取这个属性值，赋值给imgae的src

缺点：消耗资源，一直在触发监听事件，会造成性能问题

浏览器提供的构造函数IntersectionObserver

观察元素是否可见(isIntersecting)，如果可见，就加载图片。勿忘unobserve，避免多次加载。

缺点：有兼容性问题