首页 > 其他分享 >IntersectionObserver(交叉观察器)懒加载

IntersectionObserver(交叉观察器)懒加载

时间:2023-11-01 15:35:58浏览次数:32  
标签:观察器 交叉 元素 entries IntersectionObserver intersectionRatio 加载

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

2.监听目标元素与其祖先或视窗交叉状态的手段,其实就是观察一个元素是否在视窗可见

3.

const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 为 0,则目标在视野外,
  // 我们不需要做任何事情。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// 开始监听
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

4.兼容性

 

标签:观察器,交叉,元素,entries,IntersectionObserver,intersectionRatio,加载
From: https://www.cnblogs.com/foxing/p/17803239.html

相关文章

  • 问题描述:未能加载文件或程序集或它的某一个依赖项。找到的程序集清单定义与程序集引用
    报错原因:    版本不统一问题 解决方法:    右键打开“管理解决方案的NuGet程序包”--->将项目引用的程序包版本改统一(一般情况下用最新稳定版) ......
  • KFC框架:小游戏/H5 首包、分包、加载优化方案与项目示例
    CocosCreator小游戏/H5首包、分包、加载优化方案与项目示例今天是疯狂星期四,给大家晒一下最近的成果。麒麟子上周末将《Jare大冒险》升级到了CocosCreator3.8,并更新到了CocosStore。在做了更精细的分包管理、资源加载拆分,以及利用分析工具剔除了不必要的资源加载后,最终......
  • 数据加载出来之前显示loading...
    elementui的v-loading使用的是这个样式,背景颜色和字体颜色可以自行更改。v-loading绑定你的变量名element-loading-text加载文案element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值数据加载之前显示loading数据code不为0显示异常接口返回......
  • 如何修改URL而不重新加载页面?
    内容来自DOChttps://q.houxu6.top/?s=如何修改URL而不重新加载页面?有没有办法在不重新加载页面的情况下修改当前页面的URL?如果可能的话,我想访问#哈希之前的部分。我只需要更改域名之后的部分,所以它不像是违反了跨域政策。window.location.href="www.mysite.com/page2.......
  • Element Plus el-tree懒加载默认选中
    百度上试了很多方法,设置default-expanded-keys不生效,最后使用了下面的方法,亲测有效constloadNode=async(node:Node,resolve:(data:AreaType[])=>void)=>{if(node.level===0){const{data}=awaitgetRegionList(areaOptions)if(!props.special)......
  • 图片渐进式加载
    图片渐进式加载一般图片在网页上加载时,可能会因为网速问题,加载缓慢或者突兀出现感觉不协调。常见的解决办法有懒加载和渐进式等等。这里只说渐进式……参考例子//html<divclass="relative"><imageclass="zhanwei"src="占位/压缩图片"></image><imageclass="yuantu":......
  • 浅析SpringBoot加载配置的6种方式
    从配置文件中获取属性应该是SpringBoot开发中最为常用的功能之一,但就是这么常用的功能,仍然有很多开发者抓狂~今天带大家简单回顾一下这六种的使用方式:说明Environment对象Environment是springboot核心的环境配置接口,它提供了简单的方法来访问应用程序属性,包括系统属......
  • Angular 动态导入和懒加载的深入介绍
    动态导入,这是一种用于实现懒加载和代码分割的技术,但需要注意的是,它只能在主应用程序中使用。在现代的前端开发中,性能和用户体验一直是至关重要的考虑因素。随着应用程序变得越来越复杂,加载时间的优化变得尤为关键。动态导入是一项强大的技术,可以帮助我们在Angular应用程序中实现......
  • Angular 应用懒加载模块中的配置管理
    在Angular应用程序的开发中,懒加载模块(Lazy-LoadedModules)是一种重要的技术,它允许我们将应用程序划分为可延迟加载的模块,以提高性能和用户体验。然而,当我们在懒加载模块中提供额外的配置时,这会引发一些有趣的技术细节和挑战。本文将详细探讨懒加载模块中的配置管理以及相关的技术......
  • OSG开发笔记(二十九):OSG加载模型文件、加载3DMax三维型文件Demo
    前言  Osg深入之后需要打开模型文件,这些模型文件是已有的模型文件,加载入osg之后可以在常见中展示模型文件,该节点可以操作,多个逼真的模型的节点就实现了基本的场景构建。<br>Demo  <br>说明  三维模型文件一般是由专业的三维建模人员完成,可以去buy通用模型,但是定制模型......