内容简介：注意
传统的图片懒加载实现思路是判断图片的 top 区域是否小于父级区域，且自身高度加上 top 大于 0，不过这样写的话有一个问题就是我们监听的事件会重复多次触发，所以我们还需要写一个节流或者防抖函数，不过使用 IntersectionObserver 我们可以轻松实现，首先看下兼容性
使用方法
IntersectionObserver 使用方法很简单
var observer = new IntersectionObserver(callback[, options]); 复制代码
callback 接收两个参数，一个 IntersectionObserverEntry 对象列表(list)，以及触发 IntersectionObserverEntry 的实例
| 方法 | 说明 |
|---|---|
| disconnect() | 使 IntersectionObserver 对象停止监听工作。 |
| observe() | 使 IntersectionObserver 开始监听一个目标元素。 |
| unobserve() | 使 IntersectionObserver 停止监听特定目标元素。 |
注意 callback 的回调函数会触发两次，第一次是元素开始可见，第二次是元素不可见的时候。
选项(options)
注意可选属性
| 属性 | 说明 |
|---|---|
| root | 监听元素的祖先元素 Element 对象 |
| rootMargin | 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，类型为字符串，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的 margin 属性等同，默认值是"0px 0px 0px 0px" |
| threshold | 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0，则意味着监听元素即使与根有 1 像素交叉，此元素也会被视为可见. |
实例
const dom = new IntersectionObserver(a => {
console.log(a);
});
Array.from(document.querySelectorAll("img")).forEach(f => {
dom.observe(f);
});
复制代码
返回的 a 是一个数组，里面存放着一些元素信息，下面所有属性都是只读
| 属性 | 说明 |
|---|---|
| boundingClientRect | 返回包含目标元素的边界信息的 DOMRectReadOnly. 边界的计算方式与 Element.getBoundingClientRect() 相同. |
| intersectionRatio | 返回 intersectionRect 与 boundingClientRect 的比例值, 如果大于 0 则表示可见，完全可见为 1 . |
| intersectionRect | 返回一个 DOMRectReadOnly 用来描述根和目标元素的相交区域. |
| isIntersecting | 返回一个布尔值, 如果目标元素与交叉区域观察者对象(intersection observer) 的根相交，则返回 true .如果返回 true, 则 IntersectionObserverEntry 描述了变换到交叉时的状态; 如果返回 false, 那么可以由此判断,变换是从交叉状态到非交叉状态. |
| rootBounds | 返回一个 DOMRectReadOnly 用来描述交叉区域观察者(intersection observer)中的根. |
| target | 与根出现相交区域改变的元素 (Element). |
| time | 返回一个记录从 IntersectionObserver 的时间原点(time origin)到交叉被触发的时间的时间戳(DOMHighResTimeStamp). |
实现
上面已经实现判断元素是否可见，下面我们只需要根据上面思路完善一下即可开发一个图片懒加载的类，首先先说明一下图片懒加载一般情况下为了防止图片 src 为空样式不统一和加载图片突然拉伸空间，会给默认的图片设置一个占位图片，或者给定一个样式
img {
width: 400px;
height: 400px;
display: inline-block;
}
复制代码
<img /> 复制代码
上面给了一个简单的演示，注意 src 属性不要写，因为即使为空也还会加载。 顺便说下火狐浏览器如果 img 标签没有其他属性的话会理解成内联元素，就是 span 标签一样的内联元素，所以如果不放置占位图片的话推荐重置 img 为 inline-block 然后设置固定宽高。
之后就是给图片动态添加 src 属性，比较推荐的是 data- 的自定义属性，许多库用的也是这个方法，替换完成之后将图片元素从 IntersectionObserver 移除。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
