IntersectionObserver一分钟学会，超级简单

于 2024-05-18 16:08:18 发布
阅读量778 收藏 8
点赞数 15
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zbz00720/article/details/139025413
版权

文章目录

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

一、IntersectionObserver是什么？

IntersectionObserver接口，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗交叉状态的方法。

二、使用方法

1.创建观察对象

var  observer = new IntersectionObserver(callback, options)

2.观察指定DOM对象

observer.observe( DOM对象 )

observer观察者对象在观察元素是否进入视口、祖先元素的时候，不管元素是否进入，都会触发观察者对象的回调函数！

示例：

	var box = document.querySelector('.box')
	var observer = new IntersectionObserver(function(entries){
		console.log(entries)
	})
	observer.observe(box)

大家可以发现，程序会默认执行一次输出，因为box盒子默认就在视口当中，所以会触发一次；

当你滚动页面，box离开视口以后，还会再执行一次；所以：元素在视口中也会触发观察者对象，不在视口中也会触发观察者对象。

3.参数详解

1. callback 配置参数：

var  observer = new IntersectionObserver(function(entries，observer){
		//回回调函数接受两个参数，第二个可以不写，因为用处不大
}, options)

回调函数接受两个参数，分别是：所有被监听的dom对象集合，一般用 entries 表示；
以及观察者对象，一般用 observer表示，可写可不写。

在 entries 集合中的每一个元素都是被监听的对象，被监听的对象上有一些属性，其中比较常用的属性是：

isIntersecting true当前元素进入视口 false当前元素离开视口

target 当前DOM对象

这里要特别注意，要操作entries集合中的Dom对象，记得加索引！

示例：

var box = document.querySelector('.box');
	var observer = new IntersectionObserver(function(entries){
	   	console.log( entries[0].isIntersecting );
	})
observer.observe(box)

2. options 配置参数：

options是一个对象，有三个参数：

第一个参数: root: 祖先级对象 | null

root属性的值可以是一个祖先级对象，这时，主要的是针对局部的滚动效果。
当root属性不写，或者值为null时，表示的是监听DOM元素与当前视口的交叉关系！

第二个参数: rootMargin: 视口的外延值相当于扩大视口的范围

rootMargin 属性是规定视口的外延值，相当于扩大了视口的范围，用于提早触发观察者回调函数

这里直接上图解释：
在这里插入图片描述

第三个参数:threshold：0-1 就是当被观察者进入视口百分之多少时触发观察者

threshold默认值是0，表示：刚进入时就触发观察者的回调函数；完全离开时，在触发观察的回调
当threshold的值是1，表示：当被监听元素完全进入视图在触发观察者的回调函数； 当元素刚离

那如果过设置一个中间值呢？请看下图：
在这里插入图片描述

三、使用 IntersectionObserver 完成一些案例

Dom进入页面的加载动画效果(示例)

在这里插入图片描述
代码如下：

<style>
	.show{
         transform: translateY(0) scale(1);
         opacity: 1;
     }
     .hide{
         transform: translateY(100%) scale(0);
         opacity: 0;
     }
     //css样式可自行决定，这里虽然没写，但别忘了添加transtion过渡属性，让动画更加平滑
<style>
<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    var lis = document.querySelectorAll(".list li");
    var observer = new IntersectionObserver(function(entries){
    	// 2 这里会接收到所有被观察的 dom 对象
        for( var i = 0; i < entries.length; i++ ){
        	//遍历所以被观察对象，判断其是否出现在视口
            if( entries[i].isIntersecting ){
            	//为true则表示出现在视口，然后为其添加出现样式
                entries[i].target.classList.remove('hide');
                entries[i].target.classList.add('show')
            }
            else{
            //为flase则表示消失在视口，然后为其添加消失样式
                if( entries[i].boundingClientRect.top > 0 ){
                	//这里是判断li是否是往下消失
                    entries[i].target.classList.remove('show');
                    entries[i].target.classList.add('hide')
                }
            }
        }
    });
    for( var i = 0; i < lis.length; i++ ){
        observer.observe(lis[i])
        // 1 给所有li添加监听观察
    }
</script>

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

图片的懒加载效果(示例)

在这里插入图片描述

代码如下：
代码很多，不想看的麻烦，可以直接复制，里面已经写好了注释！

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 80%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }
        .item{
            width: calc( 33.33% - 20px );
            margin: 10px;
            min-height: 200px;
        }
        .item img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <div class="item">
            <img src="./img/Empty.svg" alt="">
        </div> -->
    </div>
</body>
<script>
	//先做一个数组，用来装图片的网络地址
    var imgList = [
		{
			default:'./img/Empty.svg', //这是默认生效的图片，你可以改成自己的
			url:'https://images.pexels.com/photos/23719800/pexels-photo-23719800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/20569931/pexels-photo-20569931.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/23105903/pexels-photo-23105903.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		}
		,
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/22816073/pexels-photo-22816073.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/18197764/pexels-photo-18197764.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/24031902/pexels-photo-24031902.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		}
		,
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/23914518/pexels-photo-23914518.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/16118941/pexels-photo-16118941.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/22937531/pexels-photo-22937531.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/21915597/pexels-photo-21915597.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/16703290/pexels-photo-16703290.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		}
		,
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/13298586/pexels-photo-13298586.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/18109714/pexels-photo-18109714.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/22670156/pexels-photo-22670156.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		}
		,
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/21852583/pexels-photo-21852583.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/21367366/pexels-photo-21367366.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/17102067/pexels-photo-17102067.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/24038436/pexels-photo-24038436.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		}
		,
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/19473669/pexels-photo-19473669.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/20470948/pexels-photo-20470948.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/22469105/pexels-photo-22469105.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load'
		}
		,
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/13743557/pexels-photo-13743557.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
		},
		{
			default:'./img/Empty.svg',
			url:'https://images.pexels.com/photos/23230661/pexels-photo-23230661.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load'
		},
	]

    var box = document.querySelector('.box');
	
	//渲染页面结构的工具函数，用来遍历list，然后渲染成dom结构到页面
    function initImg(list){
        for( var i = 0; i < list.length; i++ ){
            var div = document.createElement('div');
            div.className = 'item';
            var img = document.createElement('img');
            img.src = list[i].default;
            img.dataset.url= list[i].url;
            div.appendChild(img);
            box.appendChild(div);
        }
    }
    initImg(imgList);//先调用一次工具函数
    window.onload = function(){
    	//这里要等页面加载完毕，也就是默认图片加载完毕后，再执行之后的逻辑
        var items =  document.querySelectorAll('.item');
        Observer(items);//调用观察者工具函数，给其传要观察的Dom对象
    }
    //观察者工具函数
    function Observer(list){
        var observer = new IntersectionObserver(function(entries){
            for( var n = 0; n < entries.length; n++ ){
                if( entries[n].isIntersecting && entries[n].target.children[0].src.includes( "img/Empty.svg" ) ){
                    entries[n].target.children[0].src = entries[n].target.children[0].dataset.url;
                }
            }
        })
        for( var i = 0; i < list.length; i++ ){
            observer.observe(list[i])
        }
    }
</script>
</html>

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

扼流挽
关注
  • 15
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
交叉观察器（IntersectionObserver）
QAIN_的博客
10-18 116
【代码】交叉观察器（IntersectionObserver）
前端API: IntersectionObserver的那一二三件事
最新发布
单车去旅行的博客
05-28 558
IntersectionObserver 可以监听一个元素和可视区域相交部分的比例，然后在可视比例达到某个阈值的时候触发回调。可以用来处理图片的懒加载等等
【new IntersectionObserver】vue3 数据懒加载
qq_63608386的博客
03-03 560
useIntersectionObserver其实就是方便了我们之前封装的那个步骤，如果想要基于这个二次封装也是可以的。new IntersectionObserver 是用于监视元素可见度，所以我们只需要监视数据下方的dom是否可见。vue基于组合式API提供的@vueuse/core插件内的useIntersectionObserver。也可以去MDN Intersection Observer 查看完整配置项和方法。不清楚方法配置项的可以看MDN Intersection Observer。
new IntersectionObserver 使用笔记
爱前端灬不爱恋爱的博客
06-30 1570
文档链接随着网页发展，对检测某个（些）元素是否出现在可视窗相关的需求越来越多了？比如：当页面滚动时，懒加载图片或其他内容。 实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。 对某些元素进行埋点曝光 滚动到相应区域来执行相应动画或其他任务。一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事，大部分解决办法并不完全可靠，实现方式很丑陋，也极易拖慢整个网站的性能。 IntersectionObserver正因此而生reportDatail() 方法 对容器内容进行监听
IntersectionObserver的使用
老电影故事的博客
11-08 581
是一个现代浏览器提供的 API，用于监听元素与其祖先元素或顶层文档视窗(viewport)交叉的情况，即元素是否进入或离开视窗。它通常用于实现懒加载图片、监听滚动事件、触发动画效果等场景，可以显著提高性能和用户体验。
new IntersectionObserver() 超过可视范围内容改变 。。。。
夜惊如水
05-30 1073
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
IntersectionObserver简单介绍及使用，监听元素是否在可视区域内
05-22 2006
IntersectionObserver 之前就有所了解，但是一直没有用，当时觉得浏览器兼容性不好，直接用onscroll监听也能实现相关功能，但是随着浏览器支持性越来越好，这个属性到迄今为止，可以用在大部分的正式项目中了，对于提升性能和用户体验，起到一定作用。IntersectionObserver支持两个参数：callback是当被监听元素的可见性变化时，触发的回调函数options是一个配置参数，可选，有默认的属性值。
Intersection Observer Api 实现了图片懒加载和上划加载更多.
qq_54753561的博客
02-08 1023
目前有一个新的 API 叫 IntersectionObserver （交叉观察器） 可以自动"观察"元素是否可见，可见的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。Chrome 51+ 已经支持。实现了图片懒加载和上划加载更多
谈谈IntersectionObserver懒加载的具体使用
10-16
IntersectionObserver懒加载是一种高效的数据加载策略，主要用于优化网页性能，减少不必要的资源加载，提升用户体验。该技术通过IntersectionObserver API实时监控元素是否出现在浏览器视口内，只有当元素进入视口时...
IntersectionObserver API 详解篇
09-01
主要介绍了IntersectionObserver API 详解篇,需要的朋友可以参考下
LearnIntersectionObserver:简单HTML页演示演示IntersectionObserver-API
05-24
LearnIntersectionObserver
IntersectionObserver
03-10
**IntersectionObserver** 是一个在现代Web开发中非常重要的API，它是HTML规范的一部分，主要用于监测DOM元素的可视状态。这个API的出现使得开发者可以更高效、更省资源地追踪页面上元素的可见性，例如用于懒加载...
it-intersect:一个超级简单的Vue.js组件，使用IntersectionObserver通知与视口或元素相交的时间
05-12
一个简单的组件，使用IntersectionObserver通知与视口或元素相交的时间 关于 作为IntersectionObserver API的包装，当您的应用程序需要响应视口中特定组件的存在时，此简单组件非常有用。 最佳用例可能是无限滚动。...
IntersectionObserver root 不兼容导致lazyload失效
literarygirl的博客
10-28 425
https://blog.csdn.net/weixin_30730053/article/details/97558142
观察者（IntersectionObserver API）的基本使用（入门篇）
Welcome to my csdn!
05-18 792
用法可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver 介绍 一般情况下监听可视区域或者几个元素的相对可视区域状态都不是很容易，传统方式也特别消耗性能，此时就可以使用到IntersectionObserver。 操作 操作为监听一个列表的首尾是否进入视窗。 定义一个new IntersectionObserver（callback,option） 注意：此文档只使用到了callback 观察者建造 //观察者建
IntersectionObserverAPI的介绍
m0_45253204的博客
10-11 292
IntersectionObserverAPI的介绍及其使用场景
视口可见性浏览器API new IntersectionObserver() 实现图片懒加载
九段刀客的博客
12-19 326
关于new IntersectionObserver()的详细文档可以参考 阮一峰IntersectionObserver API 使用教程 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&g...
new IntersectionObserver 代码示例
02-19
IntersectionObserver 是一个异步 API，可用于检测某个 DOM 元素是否进入可视窗口。它可以用来做出响应性的交互，并减少对性能的开销。下面是一个使用 IntersectionObserver 的简单代码示例：let observer = new IntersectionObserver(callback, options); observer.observe(targetElement);callback 函数将在 targetElement 进入可视窗口时调用，并将 IntersectionObserverEntry 对象作为参数传入。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值