最近项目中多次用到 IntersectionObserver 懒加载，在这里记录一下IntersectionObserver API 的使用
工作用到的场景：
1、Shoplnk 获取展示Instagram和Facebook的图片时使用懒加载
2、Instabio biolink 的button 先加载7条按钮 当最后一条出现时再展示下7条，一次类推。
3、Linkfly 当页面展示到 当前这块内容时执行一次动画。

一、IntersectionObserver 介绍

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

简单来说是监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个元素是否在视窗可见。

IntersectionObserver API-MDN

二、IntersectionObserver 使用

创建一个相交观察器

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

交叉口观察员选项

options传递给IntersectionObserver()构造函数的对象使您可以控制调用观察者的回调的环境。它具有以下字段：

  1. root ： 所监听对象的具体祖先元素（element）。如果为传入值或值为null，则默认使用顶级文档的视窗。
  2. rootmargin：用来扩大或缩小视窗的大小，使用css的定义方法， 默认值为"0px 0px 0px 0px"。
  3. thresholds：用来指定交叉比例，决定什么时候触发回调函数，是一个数组，默认是[0]。

定位要观察的元素

创建观察者后，需要给它一个目标元素以进行观察：

let target = document.querySelector('#listItem');
observer.observe(target);

每当目标达到为所指定的阈值时IntersectionObserver，就会调用回调。回调接收IntersectionObserverEntry对象和观察者的列表：

let callback = (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
  });
};

使用示例

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	img{max-width:100%;max-height:100%;}
	.box{width:360px;height:380px;display: flex;flex-direction: column;overflow: auto;padding:40px;margin: 0 auto;}
	.box img{height: 100%;}
</style>
</head>
<body>
<div class="box">
	<img src="./img/109951164469949594.jpg">
	<img src="./img/109951164469949594.jpg">
	<img src="./img/109951164469949594.jpg">
	<img src="./img/109951164469949594.jpg">
	<img src="./img/109951164469949594.jpg">
</div>
<script type="text/javascript">
	var loadCnt = 0;
	function callback(entries){
		entries.forEach(entry => {
		    if (entry.intersectionRatio > 0 || entry.isIntersecting) {
				io.unobserve(entry.target)
				if(loadCnt < 10){
					loadCnt++;
					for (var i = 0; i < 5; i++) {
						var img = document.createElement('img');
						img.src = './img/109951164469949594.jpg';
						document.querySelector('.box').appendChild(img)
						if(i==3&&loadCnt!=9){
							io.observe(img);
						}
					}
				}
		    }
		 })
	}
	const options = {
	    root:null,
	    threshold:[1]
	}
	var io = new IntersectionObserver(callback, options);
	io.observe(document.querySelectorAll('img')[3]);
</script>
</body>
</html>
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区