Intersection observer检测元素是否在视窗内

HollisChuang 发布于2019-08-23 14:28 / 3360人阅读

摘要：新检测原理允许你配置一个回调函数，每当进入浏览器视窗时，触发回调函数。回调函数案例源码地址元素和元素相交程度达到该值的时候注册的回调函数将会被执行。默认值是意味着只要有一个像素出现在元素中，回调函数将会被执行。

前言

一直以来，检测元素在浏览器视窗口内不是件容易的事，很多解决方案都不能很准确的判断，计算量也有可能拖慢网站性能。
但是很多场景都需要用到：

当页面滚动时，懒加载图片或其他内容。

实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。

为计算广告收益，检测其广告元素的曝光情况。

根据用户是否已滚动到相应区域来灵活开始执行任务或动画。

通常检测是否在视窗内原理

监听浏览器滚动事件scroll，对每个目标元素执行Element.getBoundingClientRect(),getBoundingClientRect方法返回元素的大小及其相对于视口的位置。此方法可获取整个网页左上角定位，及距浏览器顶部的或左侧的距离，然后用innerHeight 、innerwidth 等得到视窗大小，以此相减来判断是否在视窗范围内。

具体代码如下：https://codepen.io/raoenhui/pen/BGBYpX

还有其他检测原理大多都是通过计算得到，但是下面我将要介绍由浏览器自带方法检测元素是否在视窗内。

新检测原理Intersection observer

Intersection observer 允许你配置一个回调函数，每当target进入浏览器视窗时，触发回调函数。

源码地址：https://codepen.io/raoenhui/pen/XoVEjK

用法

var options = {
    root: document.querySelector("#scrollArea"), 
    rootMargin: "0px", 
    threshold: 1.0
}
var callback = function(entries, observer) { 
    /* Content excerpted, show below */ 
};
var observer = new IntersectionObserver(callback, options);

参数

options 配置项

root 目标元素。默认使用浏览器视口做为root

rootMargin root元素的外边距。

threshold 阈值。可以是单一的number也可以是number数组，一般取1。

callback 回调函数

案例

源码地址：https://codepen.io/raoenhui/pen/xQKPaK

target元素和root元素相交程度达到该值的时候IntersectionObserver注册的回调函数将会被执行。
如果你只是想要探测当target元素的在root元素中的可见性超过50%的时候，你可以指定该属性值为0.5。如果你想要target元素在root元素的可见程度每多25%就执行一次回调，那么你可以指定一个数组[0, 0.25, 0.5, 0.75, 1]。默认值是0(意味着只要有一个target像素出现在root元素中，回调函数将会被执行)。该值为1.0含义是当target完全出现在root元素中时候回调才会被执行。

插件jquery_lazyload懒加载就是用到了此方法，

源码地址：https://github.com/tuupola/jquery_lazyload

 this.observer = new IntersectionObserver(function(entries) {
                entries.forEach(function (entry) {
                    if (entry.intersectionRatio > 0) {
                        self.observer.unobserve(entry.target);
                        let src = entry.target.getAttribute(self.settings.src);
                        let srcset = entry.target.getAttribute(self.settings.srcset);
                        if ("img" === entry.target.tagName.toLowerCase()) {
                            if (src) {
                                entry.target.src = src;
                            }
                            if (srcset) {
                                entry.target.srcset = srcset;
                            }
                        } else {
                            entry.target.style.backgroundImage = "url(" + src + ")";
                        }
                    }
                });
            }, observerConfig);

兼容性

兼容性chrome基本支持，但是意外的是safari支持性不好，用到的小伙伴们要注意这点了，兼容性具体看下图：

其他链接

官方链接[Intersection Observer API

](https://developer.mozilla.org...

https://codepen.io/raoenhui/pen/BGBYpX

https://codepen.io/raoenhui/pen/XoVEjK

https://codepen.io/raoenhui/pen/xQKPaK

我的原文地址 https://raoenhui.github.io/js/2019/01/03/IntersectionObserver/

Happy coding .. :)

GPU云服务器云服务器内元素 php是否数组元素 html块内元素间距 js删除节点内元素

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

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

原生实现img-lazyLoad:图片延迟加载（基于intersection Observer）

摘要：接下来，我们需要利用对这些暂时看不见的图片元素进行观察，当确认他们滚动到了窗体的可视区域时，我们在回调函数中对其进行加载。创建一个，配置元素和回调函数触发机制，这里我们将这个设为。点击查看视频教程哦！！！！ intersection Observer简介点击查阅MDN关于此api的使用说明这个api是用来检测dom元素交集的，常见的应用场景之一就是本文提到的对图片进行懒加载，即：...

shuibo 2019-08-23 15:05 评论0 收藏0
图像延迟加载 && 列表图顺序加载

摘要：此外，跟踪尚未延迟加载的元素数量，以及取消绑定滚动事件处理程序的繁琐工作将由开发者来完成。图像延迟加载列表图顺序加载的组件已经开源啦有兴趣的同学可以查看使用起来非常简单图片延时加载十分重要，尤其是对于移动端用户。从理论上来看，图像延迟加载机制十分简单，但实际上却有很多需要注意的细节。此外，有多个不同的用例均受益于延迟加载。首先，我们来了解一下在 HTML 中延迟加载内联图像。延迟加载...

ghnor 2019-05-23 17:33 评论0 收藏0
如何通过Vue自定义指令实现前端埋点详析

　　获取用户的交互习惯及喜好，进一步提升转化率，可以在之前的埋点方案实现中，都是在具体的按钮或者图片被点击或者被曝光时主动通过事件去上报埋点。但这种方法适合在埋点比较少时还行的项目，遇见项目中需要大量埋点时，添加的代码就太多了，就会埋点逻辑与业务逻辑的高耦合。　　由此需要换种方式。我先给大家普及下埋点上报方式都有哪些？　　手动埋点　　可视化埋点　　无痕埋点　　手动埋点，顾名思义就是纯手动写代码，调...

3403771864 2022-09-14 22:57 评论0 收藏0
判断元素是否在可视区域

摘要：如果要实现图片懒加载需要去判断图片是否在可视区域。判断方法判断一个元素是否在可视区域，我们有通常有两种办法，第一种是使用元素的属性的值和页面的进行对比如果的值小于表示元素在可视区域内。前言图片懒加载在网站运用图片比较多的时候回用到，图片懒加载可以让不在可视区域的图片不去加载，避免一次性加载过多图片导致请求阻塞，提高网站加载速度和用户体验。如果要实现图片懒加载需要去判断图片是否在可视...

Cristalven 2019-08-23 12:21 评论0 收藏0
前端每周清单第 43 期：2017 JavaScript 回顾、Rust 与 WebAssembly

摘要：杨冀龙是安全焦点民间白帽黑客组织核心成员，被浪潮之巅评为中国新一代黑客领军人物之一他在本文中依次分享了对于黑客的定义如何从黑客成为一名安全创业者技术创业踩过的坑给技术创业者建议等内容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清单专注前端领域内容，以对外文资料的搜集为...

xorpay 2019-08-22 11:15 评论0 收藏0