一篇文章带你了解什么是 IntersectionObserber。

最新推荐文章于 2024-07-07 12:17:03 发布

神秘的张某人.

最新推荐文章于 2024-07-07 12:17:03 发布

阅读量857

点赞数 22

文章标签：前端

本文链接：https://blog.csdn.net/zhang_mou_r/article/details/139025144

版权

文章目录

一、什么是 `IntersectionObserber `
二、使用方法
三、使用 `IntersectionObserver` 完成一些案例
- 1.某些html页面的dom加载动画，当页面的某些结构进入视口时，加载一些动画效果
- 2. 图片的懒加载效果
总结

一、什么是 `IntersectionObserber`

提示：这里可以添加本文要记录的大概内容：

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

提示：以下是本篇文章正文内容，下面案例可供参考

二、使用方法

1.创建观察对象

下面展示一些 内联代码片。

var observer = new IntersectionObserver(callback, options)

2.观察指定DOM对象

下面展示一些 内联代码片。

observer.observe( DOM对象 )

3.示例

observer观察者对象在观察元素是否进入视口、祖先元素的时候，不管元素是否进入，都会触发观察者对象的回调函数！
下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body{
			height: 3000px;
		}
		.box {
			width: 100px;
			height: 100px;
			border: 2px solid #ccc;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
<script>
	let box = document.querySelector('.box')
	let observer = new IntersectionObserver((entries) => {
		console.log(entries)
	})
	observer.observe(box)
</script>
</html>

大家可以发现，程序会默认执行一次输出，因为box盒子默认就在视口当中；当你滚动页面，box离开视口以后，还会再执行一次；所以：元素在视口中也会触发观察者对象，不在视口中也会触发观察者对象。

4.参数详解

1.回调函数
回调函数接受两个参数，分别是：
所有被监听的dom对象集合，一般用 entries 表示；
entries集合中的每一个元素都是被监听的对象，被监听的对象上有一些属性，其中比较常用的是：isIntersecting true当前元素进入视口 false当前元素离开视口target当前DOM对象观察者对象，一般用 observer`表示，可写可不写。

2.options配置参数
options是一个对象，有三个参数：
root祖先级对象，主要的是针对局部的滚动效果。
rootMargin:视口的外延值，相当于扩大视口的范围，用于提早触发观察者回调函数。
threshold:0-1就是当被观察者进入视口百分之多少时触发观察者。

三、使用 `IntersectionObserver` 完成一些案例

1.某些html页面的dom加载动画，当页面的某些结构进入视口时，加载一些动画效果

给dom元添加进入动画的核心逻辑就是通过css给指定元素添加过渡属性，然后使用观察对象监听每个元素，给默认在视口中的元素做最终值的处理，给不在视口中的元素做初始值的处理。那么，当元素进入视口的时候，初始值 -> 最终值就会应用过渡动画！

在这里插入图片描述

这里应该有一个视频，但小编不会插o(╥﹏╥)o

2. 图片的懒加载效果

核心思想：通过src加载一张本地的默认图片，然后通过data-src引入真实的地址。当图片进入视口以后，使用data-src的图片地址，替换src的图片地址。实现图片只有进入视口时才加载的效果。
在这里插入图片描述

这块多插点图片哈！

下面展示一些 内联代码片。

// An highlighted block
var listDom = document.querySelector('.list')
	for(var i = 0;i<list.length;i++){
		var item = document.createElement('div');
		item.className = "item";

		var img = document.createElement('img');
		img.src = list[i].default;
		img.dataset.url = list[i].url;

		item.appendChild(img);

		listDom.appendChild(item);
	}

	window.onload = function(){
		/* 创建观察者对象 */
		let observer = new IntersectionObserver(function(entries){
			for(var i = 0;i<entries.length;i++){
				if(entries[i].isIntersecting && entries[i].target.children[0].src.includes('empty.svg')){
					entries[i].target.children[0].src = entries[i].target.children[0].dataset.url;
				}
			}
		})

		var items = document.querySelectorAll('.list .item')
		for(var n = 0;n<items.length;n++){
			observer.observe(items[n]);
		}
	}

总结

OK，本文到此结束，希望本文对你有所帮助 😃

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

神秘的张某人.

关注

22
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
一篇文章带你了解什么是 IntersectionObserber。

`IntersectionObserver`接口，提供了一种异步观察`目标元素与其祖先元素或顶级文档视窗交叉状态`的方法，祖先元素与视窗(`viewport`)被称为根(`root`);
复制链接

扫一扫