懒加载核心实现之intersectionobserver 交叉观察器踩坑

最新推荐文章于 2024-05-18 16:08:18 发布
最新推荐文章于 2024-05-18 16:08:18 发布
阅读量2.6k 收藏
点赞数 1
分类专栏： 前端 js 问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiajia199470/article/details/109580507
版权

懒加载核心实现之intersectionobserver 交叉观察器踩坑

前言

懒加载是一种对网页性能优化的方式，它的原理是除了首屏资源，部分资源在浏览器滚动时出现在可视区域内的再惰性加载，而不一次性加载所有。这样做对网页性能以及用户体验都有提升。

如果你的懒加载方案是基于 intersectionobserver API ，出现懒加载失效页面空白等问题，那大部分是 Intersec

最低0.47元/天 解锁文章
加儿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端性能优化(一) IntersectionObserver 实现图片懒加载
weixin_39357177的博客
02-24 1314
主要实现流程： 先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。 现将img标签的src设置为同一张图片，减少http的请求数量，给img标签自定义属性，把真正的路径挡在自定义属性中（比...
MutationObserver、IntersectionObserver、ResizeObserver （转载）
全栈小菜鸟
08-09 2017
前言 阅读本文你可以获取到以下3个知识点 通过原生javascript的API 监听DOM元素的改变（文字、大小、背景等等）监听DOM元素之间是否相交等信息监听DOM元素大小改变，基本可以放弃全局监听window.rize了 动动小手，先点赞再观看???????????? MutationObserver MutationObserver 创建一个观察器，提供了对监视DOM树更改的能力，是DOM3 Events规范的一部分...
详解 Intersection Observer API ( 交叉观察器 )
一只路过的小码农
12-02 3628
提供了一种方法可以监听目标元素是否展示到视口（viewport）图片懒加载滚动动画…上述的需求，以往一般监听scroll事件，利用方法获取目标元素的位置信息。由于监听scroll事件，不断地触发回流，对性能有一定的影响，不过可以通过函数节流解决，但是方法对性能造成的影响无法有效优化的。！！！所以，浏览器为了解决上述难题，推出了，由于方法是异步的，不影响主线程的执行效率。
IntersectionObserver一分钟学会，超级简单
最新发布
Zbz00720的博客
05-18 544
给dom元添加进入动画的核心逻辑就是：通过css给指定元素添加过渡属性，然后使用观察对象监听每个元素，给默认在视口中的元素做最终值的处理，给不在视口中的元素做初始值的处理。当图片进入视口以后，使用data-url的图片地址，替换src的图片地址。rootMargin 属性是规定视口的外延值，相当于扩大了视口的范围，用于提早触发观察者回调函数。当threshold的值是1，表示：当被监听元素完全进入视图在触发观察者的回调函数；root属性的值可以是一个祖先级对象，这时，主要的是针对局部的滚动效果。
IntersectionObserver简单介绍及使用，监听元素是否在可视区域内
05-22 1969
IntersectionObserver 之前就有所了解，但是一直没有用，当时觉得浏览器兼容性不好，直接用onscroll监听也能实现相关功能，但是随着浏览器支持性越来越好，这个属性到迄今为止，可以用在大部分的正式项目中了，对于提升性能和用户体验，起到一定作用。IntersectionObserver支持两个参数：callback是当被监听元素的可见性变化时，触发的回调函数options是一个配置参数，可选，有默认的属性值。
React+TS实现长列表性能优化实例(虚拟列表)
zzppff的博客
01-06 833
React+TS实现长列表性能优化实例(虚拟列表)，基于IntersectionObserver实现。
谈谈IntersectionObserver懒加载
weixin_33981932的博客
02-06 125
概念 IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。 这是MDN上给的官方概念，不用去管它，我粘出来只是为了显得专业点嘛... 重点看这里监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一...
IntersectionObserver实现图片懒加载的示例
08-29
IntersectionObserver实现图片懒加载的示例 IntersectionObserver是Web API中的一种新的API，用于观察目标元素与视窗或其他元素之间的交叉状态。通过使用IntersectionObserver，我们可以实现在页面滚动时，异步加载...
谈谈IntersectionObserver懒加载的具体使用
10-16
IntersectionObserver懒加载是一种高效的数据加载策略，主要用于优化网页性能，减少不必要的资源加载，提升用户体验。该技术通过IntersectionObserver API实时监控元素是否出现在浏览器视口内，只有当元素进入视口时...
项目中实现图片懒加载的几种方式
07-25
创建一个IntersectionObserver实例，设置观察的目标元素和回调函数，当元素与视口有交集时，回调函数会被调用，从而触发图片的加载。 4. **vue-lazyload 插件**： 在Vue项目中，可以利用vue-lazyload插件来实现...
概述如何实现一个简单的浏览器端js模块加载器
10-20
以下是一个简化的模块加载器实现概览： ```javascript var ModuleLoader = { modules: {}, configs: { basePath: '', // 设置基础路径 }, resolvePath: function(path) { /* 实现路径解析逻辑 */ }, ...
无限无缝自动轮播滚动列表 IntersectionObserver实现
油墨香^-^的博客
03-02 370
在滚动到第5条数据不可见时，咱就先对前5条数据进行更替，如此数据在滚动到第10条数据不可见时肯定已经更新完毕，可以放心地重置动画，动画重置后，再对余下的10条数据进行全部更新。然而重点就在于，这个“恰好的时间节点”是无法把控的，首先 JS 的定时器本就不完全精确，另外 CSS 与 JS 的定时器更不会如我们所愿地完全一致。后，便能及时得知其可见状态的改变，因此我们可以很方便地在 A 数据由可见 -> 不可见时收到通知，进行数据更替操作。控制它们持续向上，显然是不可能的，咱们的数据可能有成千上万条。
彻底弄懂IntersectionObserver
qq_37028216的博客
02-26 517
最近vue3在开发一个页面懒加载组件，使用到的核心API就是IntersectionObserver，虽然之前也了解用过，但是还是不够理解，本文就用于记录自己的学习理解过程。
IntersectionObserver root 不兼容导致lazyload失效
literarygirl的博客
10-28 415
https://blog.csdn.net/weixin_30730053/article/details/97558142
IntersectionObserve API 使用注意事项
Lstsmart的博客
12-06 949
注意： Ie和safari不支持！！！ 基础： MDN：Intersection Observer - Web API 接口参考 | MDN 阮一峰：IntersectionObserver API 使用教程 - 阮一峰的网络日志 使用注意事项：1. 注意元素定位影响问题（检查元素定位问题）： 当元素部分处于固定定位状态时，其相对于滚动的父元素部分不可见，元素定位问题，可能会导致发生改变后的回调函数的IntersectionObserverEntry对象的intersectionRatio...
浏览器视口监测API IntersectionObserver
weixin_45917491的博客
09-10 556
前言 最近关于浏览器视口监测的实际需求遇到了特别多，有需要在页面滑过导航后导航消失，上滑鼠标时再出现导航，有需要实现页面块级区域懒加载的需求。此类需求常常需要判断某个元素是否进入了"视口"（viewport）。 实现此类需求的方法很多，一般的思路采用这样的实现方法，兼容滚动scroll事件，然后调用方法获取目标元素的坐标，判断是否在视口之内。代码不仅繁琐，由于scroll事件密集发生，计算量很大，一不小心没有注意函数去抖，就可能导致严重的性能问题。 在angular中已经有开发者贡献的图片懒加载的插件（例如
图片懒加载方式（三）
qq_44084420的博客
02-28 183
原理： IntersectionObserver.observe()：使IntersectionObserver开始监听一个目标元素； isIntersecting属性：可以判断该元素是否出现在视口内； 遍历每个img元素，然后监听每一个元素，最后根据isIntersecting属性去判断元素是否出现在视口内，从而决定是否让他加载。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
微信小程序常用API
m0_63466615的博客
03-24 5925
1.调接口 wx.request 2.页面跳转 wx.navigateTo({}) 3.创建视频前后关系 wx.createVideoContext('video的id') 4.创建音频的前后关系 wx.createInnerAudioContext() || wx.getBackgroundAudioManager() 5.设置本地存储 wx.setStorageSync('名',值) 6.读取本地存储 wx.getStorageSync('名') .........
如何使用 IntersectionObserver API 来实现数据的懒加载？（以 Vue3 为例）
weixin_42650595的博客
01-05 2895
使用 IntersectionObserver 来实现数据的懒加载
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属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值