- 2024-09-29骨架屏（懒加载优化）
即便通过Webpack的按需加载、CDN静态资源缓存和代码分割等技术来减少首屏的代码体积，首屏加载时的白屏时间（也称为首屏等待时间）仍然可能存在，尤其在网络条件较差或页面内容复杂时，常见的解决方案是使用骨架屏技术，数据加载前的占位动画可以表示内容还在加载中核心概念和
- 2024-09-18Vue中实现触底加载效果
Vue中实现触底加载效果在移动应用和Web应用中，触底加载是一种常见的功能，它允许用户在滚动到页面底部时自动加载更多内容。这种技术可以提高用户体验，减少用户的操作步骤。本文将介绍如何在Vue中实现触底加载效果。思路使用IntersectionObserverAPI：这是一个用于异步检测目
- 2024-08-29IntersectionObserver实现监听dom进入浏览器视口
letimg=document.getElementsByTagName("img");constobserver=newIntersectionObserver(entries=>{//entries是被观察的元素集合for(leti=0,len=entries.length;i<len;i++){letentries=entries[i];//通过这个属性判断是否在视口
- 2024-08-14如何判断哪些元素在视口下面
问题在一个滚动列表中，顶部有一个【全部置入】的按钮，点击按钮要将可视区域内的图片置入到页面中思路点击按钮时，循环遍历每个元素算出它的坐标-滚动条距离顶部的scrollTop通过IntersectionObserver观察者来判断哪些元素在可视区域内实现这次就使用IntersectionObserver来实
- 2024-07-26getBoundingClientRect 和 IntersectionObserver 的区别和用法
目录getBoundingClientRectIntersectionObservergetBoundingClientRectgetBoundingClientRect是一个DOMAPI方法，用于获取指定元素相对于视口的位置和尺寸信息。它返回一个DOMRect对象，包含了元素的左上角和右下角相对于视口的坐标。“图片懒加载”，这个词语想必大家再熟悉不
- 2024-05-25IntersectionObserver的简单使用
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>
- 2023-11-01IntersectionObserver(交叉观察器)懒加载
1.IntersectionObserver 接口（从属于 IntersectionObserverAPI）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root） 2.监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个元素是否在视窗可见3.constint
- 2023-09-12js 浏览器的5种observer 第二种 IntersectionObserver 详解及使用方法
IntersectionObserver是一个现代的浏览器API，允许开发者在某个元素与其祖先元素或顶层文档视口发生交叉时得到通知。它非常适合实现图片懒加载、无限滚动、广告曝光率等功能。1.浏览器的兼容性IntersectionObserver目前在大多数现代浏览器中都得到了支持。但是在一些老版
- 2023-08-24IntersectionObserver 实现图片懒加载、列表无限滚动等功能
过去，要检测一个元素是否可见或者两个元素是否相交并不容易，比如实现图片懒加载、内容无限滚动等功能时，都需要通过getBoundingClientRect()写大量的逻辑计算或者依靠scroll事件监听等性能很差方式来实现。现在，依靠IntersectionObserver（交叉观察器）我们能非常便捷且高效的实现上
- 2023-07-13对目标元素进行监听 - addListener和IntersectionObserver
在web的构建中，经常需要对元素进行监听，例如监听元素是否出现在可视范围内。我们可以通过addEventListener来监听滚动，计算元素距离顶部的位置对元素的变更来做出反应。但是长时间大量的触发事件反而对网页性能影响很大，使用节流的话其实也只是浅浅的优化一下性能。有没有其他思路可
- 2023-03-03ResizeObserver和IntersectionObserver
ResizeObserverResizeObserver是监听DOM元素宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度constresizeObserver=newResizeObserver((entries
- 2023-02-08温习日志-14
温习日志——2023年2月8日下午学习内容事件冒泡练习通过点击事件中函数参数的e.target就是所点击的具体元素，最终会一直向上传递，通过e.currentTarget获取最终的元素
- 2022-10-31用IntersectionObserver来处理已读未读
*参考地址：IntersectionObserver-WebAPI接口参考|MDN(mozilla.org)一、IntersectionObserver的使用场景主要用来监听目标元素和指定的根元素之间，在滚动界面的时
- 2022-10-03IntersectionObserver 检测元素是不是可见
constintersectionObserver=newIntersectionObserver((entries,observer)=>{entries.forEach(item=>{const{intersectionRatio,target}=item//intersec
- 2022-08-29使用IntersectionObserver 实现懒加载 && 记录一个懒加载失效的原因
先说说我实现懒加载失效的一个原因：是图片没有写高度猜想是没有给图片高度，所以底层没法进行计算容器是否出现在视图中 实现一个IntersectionObserver//配置参数请看