vue：intersectionObserve实现图片懒加载
1.intersectionObserver
IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。
当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。
IntersectionObserverEntry.intersectionRatio(en-US) 只读，返回intersectionRect 与 boundingClientRect 的比例值。
IntersectionObserverEntry.isIntersecting(en-US) 只读，返回一个布尔值，如果目标元素与交叉区域观察者对象 (intersection observer) 的根相交，则返回 true .如果返回 true, 则 IntersectionObserverEntry 描述了变换到交叉时的状态; 如果返回 false, 那么可以由此判断，变换是从交叉状态到非交叉状态。
此方法兼容性不太好。
2.实现方法：
<body>
<div style="height: 1100px;"></div>
<img src="" data-src="./R-C.jpg" alt="">
<img src="" data-src="./R-C (1).jpg" alt="">
<script>
const images = document.querySelectorAll('img')
const callback = (entries) => {
entries.forEach(entry => {
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现（可直接运行）以及底层原理
投递华为等公司10个岗位 >
