IntersectionObserver监听容器元素

DandJ 发布于2019-08-26 11:39 / 1360人阅读

摘要：是已经支持的，用来检测目标元素是否处于容器之中。之前我们在做懒加载的时候，通常都是监听浏览器事件，然后根据元素位置是否处于可视窗口来做的，这种方式有个弊端就是，页面在监听滚动的时候会导致页面加载不流畅。

IntersectionObserver是Chrome 51+已经支持的API，用来检测目标元素是否处于root容器之中。
之前我们在做懒加载的时候，通常都是监听浏览器scroll事件，然后根据元素位置是否处于可视窗口来做的，这种方式有个弊端就是，页面在监听scroll滚动的时候会导致页面加载不流畅。
使用IntersectionObserverAPI就可以避免这种情况，达到平滑加载的目的，并且可以根据threshold来定义回掉函数在什么时候触发，更加的简单准确。




    
    Document

IntersectionObserver有observe,unobserve,disconnect等三个方法，分别指绑定观察对象、停止观测、关闭观察器。
IntersectionObserver(callbakc,opts)接受两个参数,第一个参数为回调函数,在检测目标根据opts里面的threshold内容来触发。

容器云 IntersectionObserver 配置监听实现监听网络监听

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107296.html

图片懒加载的前世今生

摘要：配置项配置项中的参数有以下三个所监听对象的具体祖先元素，默认是计算交叉状态时，将附加到祖先元素上，从而有效的扩大或者缩小祖先元素判定区域设置一系列的阈值，当交叉状态达到阈值时，会触发回调函数。一、前言通常情况下，HTML 中的图片资源会自上而下依次加载，而部分图片只有在用户向下滚动页面的场景下才能被看见，否则这部分图片的流量就白白浪费了。所以，对于那些含有大量图片资源的网...

zhaot 2019-08-23 16:13 评论0 收藏0
IntersectionObserve初试

摘要：构造函数调用时，需要给它传一个回调函数。当监听的元素进入可视区域或者从可视区域离开时，回调函数就会被调用。构造函数的返回值是一个观察器实例。它是一个数组，每个成员都是一个门槛值，默认为，即交叉比例达到时触发回调函数。 IntersectionObserve这个API，可能知道的人并不多(我也是最近才知道...)，这个API可以很方便的监听元素是否进入了可视区域。 * { marg...

LucasTwilight 2019-08-23 15:34 评论0 收藏0
Javascript零碎之IntersectionObserver

摘要：主要用于元素可见性的监听，比传统通过全局监听事件去判断可见性无论是性能还是便利性都要好得多。问题是这种通过监听的方式很容易导致性能问题，或者多多少少会有些性能损失。 IntersectionObserver主要用于元素可见性的监听，比传统通过全局监听scroll事件去判断可见性无论是性能还是便利性都要好得多。因为api比较新，存在兼容性问题，好在已经有了兼容的polyfill.其基本介...

张迁 2019-08-23 18:24 评论0 收藏0
【前端词典】5 种滚动吸顶实现方式的比较[性能升级版]

摘要：用于获得当前元素到定位父级顶部的距离偏移值。后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的种滚动吸顶实现方式做详细介绍。有兼容性问题，在微信浏览器某些版本中的值会为，于是乎也就有了第三种方案的兼容性写法。修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下：添加...

happyfish 2019-05-23 17:31 评论0 收藏0
如何实现元素曝光上报

摘要：进行数据上报的时候，经常会遇到列表数据曝光上报的问题，只对在当前可视范围内的数据内容进行曝光上报，而对于未在可视范围内的数据不进行曝光上报，等待用户滚动页面或者区域使元素出现在可视范围内时才进行曝光上报。进行数据上报的时候，经常会遇到列表数据曝光上报的问题，只对在当前可视范围内的数据内容进行曝光上报，而对于未在可视范围内的数据不进行曝光上报，等待用户滚动页面或者区域使元素出现在可视范...

VincentFF 2019-08-26 10:35 评论0 收藏0