本文主要是介绍Intersection Observer学习(附懒加载实例)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 1 定义
- 2 用法
- 2.1 options
- 2.2 callback
- 3 lazyload懒加载demo
1 定义
Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。
说白了，就是判断一个元素与其父元素（或浏览器视窗）的重叠情况。
2 用法
var observer = new IntersectionObserver(callback, options);
2.1 options
先谈谈options，options是一个对象，有三个字段
-
root
指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。 -
rootMargin
root元素的外边距。类似于css中的 margin 属性。但我觉得像是padding属性，它会扩大root的判断范围。比如padding是20px，那么root的范围上下左右，会扩大20px，也就是说，判定范围变大了。 -
threshold
可以是单一的number也可以是number数组，target元素和root元素相交程度达到该值的时候IntersectionObserver注册的回调函数将会被执行。该值取0.0到1.0之间，代表交叉的比率。
2.2 callback
var callback = function(entries, observer) { entries.forEach(entry => {// Each entry describes an intersection change for one observed// target element:// entry.boundingClientRect// entry.intersectionRatio// entry.intersectionRect// entry.isIntersecting// entry.rootBounds// entry.target// entry.time});
};
对于每一个entry有如下属性
- boundingClientRect 目标元素的矩形信息
- intersectionRatio 相交区域和目标元素的比例值
- intersectionRect/boundingClientRect 不可见时小于等于0
- intersectionRect 目标元素和视窗（根）相交的矩形信息 可以称为相交区域
- isIntersecting 目标元素当前是否可见 Boolean值 可见为true
- rootBounds 根元素的矩形信息，没有指定根元素就是当前视窗的矩形信息
- target 观察的目标元素
- time 返回一个记录从IntersectionObserver的时间到交叉被触发的时间的时间戳
3 lazyload懒加载demo
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {height: 500px;}</style>
</head>
<body><div><img src="../asset/unknown.png" alt="x" id="1"></div><div><img src="../asset/unknown.png" alt="x" id="2"></div><div><img src="../asset/unknown.png" alt="x" id="3"></div><div><img src="../asset/unknown.png" alt="x" id="4"></div><div><img src="../asset/unknown.png" alt="x" id="5"></div><script>const URL = '../asset/loader.jpg'let imgs = document.querySelectorAll('img');let observer = new IntersectionObserver((entries)=>{// console.log(entries);// entry is a <img />entries.forEach((entry) => {if (entry.isIntersecting === true) {console.log(entry);entry.target.src = URL;}})},{threshold: 0.2})imgs.forEach((e) => {// e is a <img />observer.observe(e);})</script>
</body>
</html>
这篇关于Intersection Observer学习(附懒加载实例)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
