IntersectionObserver API实现图片懒加载、无限滚动

已于 2023-06-14 08:55:22 修改
阅读量1.1k 收藏 3
点赞数 5
文章标签： javascript 前端
于 2023-05-17 11:36:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llllllhy_/article/details/130718699
版权

目录

1、IntersectionObserver API

IntersectionObserver 可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"

const observer = new IntersectionObserver(callback, option);

IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数

  • callback：当可见性发生变化时的回调函数
  • option：配置对象（可选性）

构造函数的返回值生成的实例有四个方法：

  • observe：开始监听特定元素
  • unobserve：停止监听特定元素
  • disconnect：关闭监听工作
  • takeRecords：返回所有观察目标的对象数组

1.1、observe 方法

该方法需要接收一个target参数，值为Element类型，指定被监听的目标元素

// 获取dom元素
const target = document.getElementById("app")

// 开始观察 实例.observe(dom元素)
observer.observe(target);

1.2、unobserve 方法

该方法需要接收一个target参数，值是Element类型，用来指定停止监听的目标元素

// 获取dom元素
const target = document.getElementById("app")

// 开始观察 实例.observe(dom元素)
observer.unobserve(target);

1.3、disconnect 方法

该方法不需要接收参数，用来关闭观察器

// 关闭观察器
observer.disconnect();

1.4、takeRecords 方法

该方法不需要接收参数，返回所有被观察的对象，返回值是一个数组

// 关闭观察器
const observerList = observer.takeRecords();

1.5、callback 参数

目标元素的可见性发生变化时，就会调用观察器的回调函数callback
可见性变化：目标元素进入视口，目标元素完全离开视口

const observer = new IntersectionObserver((changes, observer) => {
   
  console.log(changes);  // 包括的目标元素
  console.log(observer); // 当前实例对象
});

1.6、 options

可以在1.5中的 console.log(observer) 看到

  • threshold: 决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。用户可以自定义这个数组。比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
  • root: 用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
  • rootMargin: 用来扩大或者缩小视窗的的大小，使用css的定义方法，10px 10px 30px 20px表示top、right、bottom 和 left的值

2、IntersectionObserverEntry 对象

changes数组中每一项都是一个IntersectionObserverEntry 对象
changes相关参数

  • boundingClientRect：目标元素的矩形区域的信息
  • intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
  • intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
  • isIntersecting: 布尔值，目标元素与交集观察者的根节点是否相交（常用）
  • isVisible: 布尔值，目标元素是否可见（不建议在生产环境中使用）
  • rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
  • target：被观察的目标元素，是一个 DOM 节点对象（常用）
  • time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒

3、相关效果

我们可以通过IntersectionObserver 来做到与滚动相关的效果

3.1、图片懒加载

首先需要观察懒加载元素，然后等元素进入可视化区域后设置图片的spc。还可以结合 IntersectionObserver.rootMargin 实现提前加载图片，一般可以设置为 1~2倍浏览器窗口的视口高度

HTML部分

<body>
    <h1>JavaScript 的歷史及現況</h1>

    <p>1990 年,科學家 Tim Berners-Lee 在互聯網的基礎上發明了萬維網 (World Wide Web),World Wide Web
        這個詞在互聯網早期經常提到,還一直影響至今,大家記得網址開端一般都是以 www 起首的嗎?就是 World Wide Web 的簡寫。發明了
        www,從此我們可以在網上互傳檔案。但這個時候的只能通過命令行模式 (Command Mode) 存取網絡,而且只能顯示文字,顯然是不方便的。</p>

    <p>1992 年史上第一個圖形化的網頁瀏覽器 Mosaic 誕生,1994 年改名為 Netscape Navigator (網景) 並推出 1.0 版本,市場佔有率超過
        90%。由於當時的互聯網速度很慢,而且上網費昂貴,Netscape
        公司為了優化瀏覽體驗,覺得有必要研發一套腳本語言,是在瀏覽器端運行的。例如我們在一個網站登入會員,忘了填寫用戶名稱就點擊了「登入」,這是候網頁再次載入,才提醒需要填寫用戶名稱,這顯然晚了一點。瀏覽器應該可以在用戶點擊「登入」時就進行初步檢查,在檢查到錯誤時及時彈出提示訊息讓用戶修正。
    </p>

    <p>Netscape 公司對於這種基於瀏覽器的腳本語言的想法是：功能不需要太強,語法較簡單,容易學習和應用。公司聘請了 Brendan Eich 研發這個腳本語言,據說他只用了 10
        天,就設計好這個語言的第一版,最初命名為 Mocha,及後改名為 LiveScript。</p>

    <p>而據說當時 Sun 公司的 Java 語言相當受歡迎,出於市場推廣的原因,固意將這門語言與 Java 在名義上扯上關係(而實際上幾乎沒有)。Netscape 與 Sun 公司達成「合作協議」允許將 LiveScript 命名為
        JavaScript。大家還記得當時有 JavaApplet 這種瀏覽器插件嗎?JavaApplet 是 Sun 公司發展出來,真正使用 Java 語言編寫,在瀏覽器端運行的應用程式,當時期望 JavaScript
        的角色是像膠水一樣將各部份連接起來。後來 JavaApplet 失敗了,JavaScript 卻發揚光大了。</p>

    <p>1996 年 JavaScript 隨著 Netscape 2.0 正式推出。</p>

    <p>1996 年 8 月 Microsoft 仿效 Netscape,於自己的 IE 瀏覽器發展出一門與 JavaScript 相近的腳本語言,取命 JScript。一山不能藏二虎,Netscape 公司將
        JavaScript 提交給 ECMA International(歐洲電腦製造商協會)進行標準化,它就是 ECMAScript。不過基於歷史原因及市場原因,大家都習慣用 JavaScript
        這個名字而非 ECMAScript。我們現在說的 JavaScript ES5 / ES6 等等,ES 就是 ECMAScript 版本
最低0.47元/天 解锁文章
壹_yi
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
IntersectionObserver实现图片懒加载的示例
08-29
IntersectionObserver实现图片懒加载的示例 IntersectionObserver是Web API中的一种新的API，用于观察目标元素与视窗或其他元素之间的交叉状态。通过使用IntersectionObserver，我们可以实现在页面滚动时，异步加载...
lazyImage:使用interSectionObserver API异步加载图片
04-27
使用interSectionObserver API异步加载图片 当前懒加载图片的方法 要想知道当前是否需要加载一张图片，我们需要坚持当前页面可见范围内这张图片是否可见。如果是，则加载。 检查方法：我们可以通过事件和事件处理器...
vue3通过IntersectionObserver实现图片懒加载
sfumato的博客
03-01 533
加载前： 加载后：
IntersectionObserver：实现滚动动画、懒加载、虚拟列表
xxq_0217的博客
03-27 1440
IntersectionObserver：实现滚动动画、懒加载、虚拟列表
前端渲染优化常用总结-滚动分页加载、虚拟列表、延迟加载IntersectionObserver
最新发布
weixin_44667515的博客
06-17 860
有时候数据量大，页面请求数量过多会造成不好的体验，比如接口响应时间慢、并发请求多，渲染慢等等。最近就遇到了类似的优化需求，主要是三种滚动分页加载、虚拟列表、延迟加载，在这里记录一下他们的使用场景。
通过IntersectionObserver实现图片懒加载功能
2301_78223700的博客
07-19 408
图片懒加载是日常开发会经常使用的一个功能,但是在日常中可能使用v-lazy便直接实现了图片懒加载,现在想通过原生js来实现一下图片懒加载的功能.首先来介绍一下,这个在中有十分详细的介绍.可以直接去看原文.这里简单介绍一下他的用法.
IntersectionObserver实现滚动加载
lqiqil的博客
10-20 1071
实际上，因为 document.querySelector 如果元素不存在就会返回 null ，而当 element 传递给 sectionObserver.observe() 时，如果 element 是 null ，就会抛出上述异常发生 Failed to execute ‘observe’ on ‘IntersectionObserver’: parameter 1 is not of type ‘Element’ ，所以请确保 document.querySelector 选择的元素必须存在。
IntersectionObserver 图片懒加载方法
young_sam的博客
03-23 323
** 动态创建img标签 使用随机图片api *//** 设置图片显示观察 */// 被观察者进入视口。
懒加载神器——Intersection Observer
qq_44327851的博客
09-13 409
懒加载是一种独特而又强大的数据获取方式，它能够在用户滚动页面的时候自动获取更多的数据，而得到的新的数据不会影响原有的数据的显示，同时最大程减少服务器端的资源耗用。简单来说，懒加载就是延迟加载，按需加载，当对象要用到的时候再去加载相关的对象，在长网页中延迟加载数据，是一种比较好的网页性能优化方式。该构造函数接收两个参数。其实从上面两点就能很好的看出来，懒加载最常运用到的地方就是图片等资源的的加载了，特别是当图片的资源过大的时候。当我在看到懒加载的需求的时候就在想是否有更好的方法，在DOM API找到了。
vue指令实现页面图片懒加载鼠标滚动图片开始加载
12-01
图片懒加载的核心原理在于监听滚动事件，当图片元素进入可视区域时，触发加载操作。在 Vue 中，我们可以编写一个自定义指令(v-lazy)来实现这一功能。首先，我们需要创建一个指令对象，包含bind、update和unbind三个...
项目中实现图片懒加载的几种方式
07-25
总的来说，图片懒加载技术是前端优化的重要组成部分，通过合理选择和实现方式，可以有效地提高网页的加载速度，优化用户体验。在实际开发中，需要根据项目的具体需求和浏览器兼容性选择合适的实现策略。
详解前端性能优化之原生JS实现图片懒加载效果(通过IntersectionObserver内置构造函数实现)
izl040905的博客
11-17 1160
相信你作为一名用户，使用一款app，在首次打开页面时卡顿超过3秒时就会有退出的想法。所以我们在日常开发中，通常需要使用一些手段实现对性能的优化，来使得页面加载更快，用户体验更好。这其中有许多方式，其中最常用的无非是按需加载了，今天就带大家重点且详细的讲一下原生JS实现的图片懒加载。
IntersectionObserver与无限滚动加载
pscool的博客
04-12 807
Intersection Observer API 会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时 (或者 viewport )，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。构造函数的返回值是一个观察器实例。无论您是使用视口还是其他元素作为根，API 都以相同的方式工作，只要目标元素的可见性发生变化，就会执行您提供的回调函数，以便它与所需的交叉点交叉。它可以设置以下属性。
vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver
jjw_zyfx的博客
03-15 911
【代码】vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver。
如何使用 IntersectionObserver API 来实现数据的懒加载？（以 Vue3 为例）
weixin_42650595的博客
01-05 2956
使用 IntersectionObserver 来实现数据的懒加载
性能更佳、使用更简单的懒加载IntersectionObserverEntry（观察者）
zx2425049056的博客
07-28 367
性能更佳、使用更简单的懒加载方式IntersectionObserver
懒加载优化方案——IntersectionObserver
weixin_41770018的博客
08-07 123
在加载图片列表时候，如果不做任何处理，浏览器会创建所有img标签并去加载每一张图片，当图片过大，或者过多的时候，页面将超级消耗资源，这时候，懒加载就起到了一个很重要的作用(如果有运维支持，当这篇文章不存在)，只展示用户看到的(屏幕内的)，所以官网提供了一个原生的APIIntersectionObserver接口； 从属于Intersection Observer API)提供了一种异步观...
用intersectionObserver实现懒加载
StarFlll的博客
08-02 740
new intersectionObserver方法运用 createDocumentfragment方法运用 学习笔记
IntersectionObserver 实现懒加载
m0_50864962的博客
05-29 298
数组里的每一项中的 isIntersecting: true 表示该元素与设置的目标元素有交叉。target 是监听的 dom 卸载时可使用。打印 entries 得到一个数组,rootMargin 图解。
IntersectionObserver怎么实现懒加载
03-25
IntersectionObserver是一种新的API，可以用于实现懒加载。懒加载是指在页面滚动时，只加载可视区域内的内容，而不是一次性加载所有内容。这样可以优化网页加载速度，提升用户体验。 下面是IntersectionObserver实现懒加载的步骤： 1. 创建一个IntersectionObserver对象：可以通过其构造函数创建。 2. 选取需要进行懒加载的图片或其他DOM元素，将其包裹在一个容器元素中。 3. 使用IntersectionObserver对象的observe方法来观察容器元素。 4. 在回调函数中获取到可见性变化的元素，如果元素进入可视区域，就将其src属性指向真实图片的地址，实现图片的懒加载。 下面是一个示例代码： ``` let lazyImages = document.querySelectorAll('.lazy-image'); let options = { root: null, // 窗口视图作为根元素 rootMargin: '0px', // 不添加边框 threshold: 0.1 // 当可见性达到10%时触发回调 }; let observer = new IntersectionObserver(function(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { // 元素进入可见视图 let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; observer.unobserve(lazyImage); // 取消观察 } }); }, options); lazyImages.forEach(lazyImage => { observer.observe(lazyImage); }); ``` 在上面的代码中，我们首先选取了所有带有lazy-image类的图片元素，然后创建了一个IntersectionObserver对象，指定了观察的根元素和触发回调的阈值。接着，我们遍历了所有图片元素，使用observe方法观察了每个元素。在回调函数中，我们判断元素是否进入了可视区域，如果是，就将该元素的data-src属性值赋给src属性，实现懒加载，然后取消对该元素的观察。最后，我们通过forEach方法将所有图片元素添加到IntersectionObserver的观察列表中。 注意，容器元素的宽高需要在CSS中指定，否则IntersectionObserver无法准确计算元素的可见性。同样，图片元素的真实地址需要通过data-src属性指定，而不是src属性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值