icodex | 前端技术博客 | 专注 React、TypeScript、AI 与性能优化 Blog
icodex - 个人网站
马上订阅 icodex | 前端技术博客 | 专注 React、TypeScript、AI 与性能优化 Blog RSS 更新: https://icodex.me/atom.xml
IntersectionObserver API 用法
当我们说到图片懒加载、页面数据的滚动加载这些体验设计时，一般能够想到基于scroll事件，通过getBoundingClientRect方法获取元素相对于视口偏移量top，来判断元素是否可见，demo 如下
这种实现方式较为繁琐，但是现在我们有了IntersectionObserver API，可以大大简化这些通过计算元素偏移量来判断可视性的逻辑。
W3C 在 2017-09-14 正式发布了IntersectionObserver API 草案，其功能上提供了检测目标元素在祖先元素或 viewport 内可视情况变化的方式，这种观测是异步的，保证了开发上的便捷和性能上的高效。
IntersectionObserver类型定义
IntersectionObserver本身是一个构造函数，需要通过new来初始化调用，基本使用方式如下：
// 获取目标元素 DOM 对象
const observeTarget = document.querySelector("#targetId");
// 初始化IntersectionObserver实例
let observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
// e.isIntersecting 为 true，则目标元素变得可见
if (e.isIntersecting) {
}
})
}, {
threshold: [0, 1]
});
// 开始监测目标元素
observer.observe(observeTarget);
// 取消监测
observer.unobserve(observeTarget);
observer.disconnect();
下面是详细的 TypeScript 类型定义：
/*...剩余内容已隐藏
icodex | 前端技术博客 | 专注 React、TypeScript、AI 与性能优化 Blog
icodex - 个人网站
马上订阅 icodex | 前端技术博客 | 专注 React、TypeScript、AI 与性能优化 Blog RSS 更新: https://icodex.me/atom.xml
IntersectionObserver API 用法
当我们说到图片懒加载、页面数据的滚动加载这些体验设计时，一般能够想到基于scroll事件，通过getBoundingClientRect方法获取元素相对于视口偏移量top，来判断元素是否可见，demo 如下
这种实现方式较为繁琐，但是现在我们有了IntersectionObserver API，可以大大简化这些通过计算元素偏移量来判断可视性的逻辑。
W3C 在 2017-09-14 正式发布了IntersectionObserver API 草案，其功能上提供了检测目标元素在祖先元素或 viewport 内可视情况变化的方式，这种观测是异步的，保证了开发上的便捷和性能上的高效。
IntersectionObserver类型定义
IntersectionObserver本身是一个构造函数，需要通过new来初始化调用，基本使用方式如下：
// 获取目标元素 DOM 对象
const observeTarget = document.querySelector("#targetId");
// 初始化IntersectionObserver实例
let observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
// e.isIntersecting 为 true，则目标元素变得可见
if (e.isIntersecting) {
}
})
}, {
threshold: [0, 1]
});
// 开始监测目标元素
observer.observe(observeTarget);
// 取消监测
observer.unobserve(observeTarget);
observer.disconnect();
下面是详细的 TypeScript 类型定义：
/*...剩余内容已隐藏