使用IntersectionObserver更高效的监视某个页面元素是否进入了可见窗口
比如说,你想跟踪 DOM 树里的一个元素,当它进入可见窗口时得到通知。 也许想实现即时延迟加载图片功能,或者你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 scroll
事件或者用一个周期性的定时器,然后再回调函数中调用元素的 getBoundingClientRect()
获取元素位置实现这个功能。 但是,这种实现方式性能极差,因为每次调用 getBoundingClientRect()
都会强制浏览器重新计算整个页面的布局,可能给你的网站造成相当大的闪烁。 如果你的站点被加载到一个 iframe 里,而你想要知道用户什么时候能看到某个元素,这几乎是不可能的。 单原模型(Single Origin Model)和浏览器不会让你获取 iframe 里的任何数据。 这对于经常在 iframe 里加载的广告页面来说是一个很常见的问题。
IntersectionObserver 就是为此而生的,它让检测一个元素是否可见更加高效,而且已经在 Chrome 51 中实现。 IntersectionObserver
能让你知道一个被观测的元素什么时候进入或离开浏览器的可见窗口。
如何创建一个 IntersectionObserver
API 比较简单,最好用一个例子说明:
var io = new IntersectionObserver(
entries => {
console.log(entries);
},
{
/* 使用默认参数。下面详细说明 */
}
);
// 开始观测某个元素
io.observe(element); // 停止关注某个元素
// io.unobserve(element); // 禁用整个 IntersectionObserver
// io.disconnect();
使用 IntersectionObserver
的默认属性,当元素部分进入可见窗口或完全离开可见窗口时都会调用你的回调函数。
如果你需要观测多个元素,你可以用——而且是推荐使用——同一个IntersectionObserver
实例调用多次 observe()
。
一个 entries 参数会被传递给你的回调函数,它是一个IntersectionObserverEntry 对象数组。 每个对象都包含更新过的交点数据针对你所观测的元素之一。
[IntersectionObserverEntry]
time: 3893.92
使用IntersectionObserver更高效的监视某个页面元素是否进入了可见窗口的更多相关文章
- 如何使代码审查更高效【摘自InfoQ】
代码审查者在审查代码时有非常多的东西需要关注.一个团队需要明确对于自己的项目哪些点是重要的,并不断在审查中就这些点进行检查. 人工审查代码是十分昂贵的,因此尽可能地使用自动化方式进行审查,如:代码 ...
- 从 DevOps 到 Serverless:通过“不用做”的方式解决“如何更高效做”的问题
作者 | 徐进茂(罗离) JAVA 开发工程师 导读:近年来,Serverless 一词越来越热,它已经逐渐成为了一种新型的软件设计架构.和 DevOps 概念提倡的是通过一系列工具和自动化的技术来 ...
- 更强、更稳、更高效:解读 etcd 技术升级的三驾马车
点击下载<不一样的 双11 技术:阿里巴巴经济体云原生实践> 本文节选自<不一样的 双11 技术:阿里巴巴经济体云原生实践>一书,点击上方图片即可下载! 作者 | 陈星宇(宇慕 ...
- HarmonyOS新能力让数据多端协同更便捷,数据跨端迁移更高效!
作者:yijian,终端OS分布式文件系统专家:gongashi,终端OS分布式数据管理专家 HarmonyOS作为分布式操作系统,其分布式数据管理能力非常重要.我们也一直围绕持续为开发者带来全局&q ...
- 如何更高效地定制你的bootstrap
bootstrap已经作为前端开发必不可少的框架之一,应用bootstrap使得我们对布局.样式的设定变得非常简单.但bootstrap提供的默认样式往往不能满足我们的需求,从而定制化bootstra ...
- documnent.getElementbyId(‘myId’)和$(‘#myId’)哪种更高效?
第一种更高效,直接调用javascript引擎.
- 使jQuqer更高效的方法
讨论 jQuery 和 javascript 性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的 jQuery 和 javascript 代码.好的代码会带来速度 ...
- 为什么说Parcelable 比Serializable更高效
本文转载自:http://blog.csdn.net/androidzhaoxiaogang/article/details/8172539 什么是序列化,实现序列化的目的是什么? 讨论这个问题之前, ...
- AS-->如何更高效的使用 Gradle, 快速build apk
版权声明:欢迎转载,转载请注明出处;http://blog.csdn.net/angcyo 看本文之前,推荐先看我之前写的一篇文章: 传送门 日前Android Stuido 已经更新到 2.0.0 ...
随机推荐
- WAMP搭建
win2003Apache+PHP+Mysql+PHPmyadmin 软件版本: Apacheèhttpd-2.2.25-win32-x86-no_ssl.msi php-5.4.3-Win32-VC ...
- zabbix基本功能操作
上一篇我已经把zabbix server 和zabbix agent 安装在了同一台主机上,现在如何配置zabbix server监控自己. vim /etc/zabbix/zabbix_agentd ...
- centos查看设置端口开放状态
centos查看端口是否已开放/etc/init.d/iptables status centos开放端口/sbin/iptables -I INPUT -p tcp --dport 8000 -j ...
- sublime配置问题
sublime本身功能有限,我们需要装上一些插件使其变得强大.sublime在各个操作系统下都可以运行,但在linux下运行需要注意中文输入的问题. 下面我主要介绍一下常用插件.配置的建议以及在lin ...
- 在Nginx 下运行 Laravel5.1 的配置
一.nginx 的 vhost.conf 配置: server { listen ; server_name sub.domain.com; set $root_path '/srv/www/defa ...
- 生成不重复随机数,int转 TCHAR 打印输出
在0~n 中 随机去除不重复的k个数 int k=100; int n=80000; for(int i=0;k>0&&i<n;i++) { if((bigrand()%( ...
- 生产WCF客户端类文件的命令格式
生产WCF客户端类文件的命令格式: svcutil.exe net.tcp://127.0.0.1:8732/ChromaMI.Remote.ConfigService/RemoteConfigSer ...
- python之poplib库
pop3能实现访问远程主机下载新的邮件或者下载后删掉这些邮件.不支持多信箱,也不能提供持久稳定的邮件认证.也就是说不能使用pop3来作为邮件同步协议. poplib支持多个认证方法.最普遍的是基本的用 ...
- 转换framebuffer实现安卓截图
编译出了RECOVERY肯定需要截图分享的啦,可是又不能通过DDMS截图~ 那就只好通过提取手机的fb0文件来实现截图. 首先你需要ADB~ 嗯,这个都没有的话你就别看下去了... 还需要ffmpeg ...
- ios第三方分享到qq、微信、人人网、微博总结
我们开发出来的APP通常要通过第三方分享到其他社交平台,如qq.微博微信 等.通过分享可以提高APP的传播效率,增加APP的曝光率,因此也算是APP功能 里的标配了吧.目前常用的第三方分享途径有qq. ...