element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClientRect.Top<=document.documentElement.clientHeight时表示该元素在可视范围内. 详细介绍 IntersectionObserver对象 异步监听目标元素与其祖先或视窗的位置信息,通常用于替代element.getBoundingClientRect+wi…

目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 getBoundingClientRect Element.getBoundingClientRect() 方法返回值是一个 DOMRect 对象,包含了该元素一组矩形的集合:是与该元素相关的css边框集合(top, left, right, bottom). 我们可以采用如下方法来判断是否在可视区域:…

先看看大概效果 1.首先需要了解微信API:          wx.createIntersectionObserver(Object component, Object options) 创建并返回一个 IntersectionObserver 对象实例.在自定义组件或包含自定义组件的页面中,应使用 this.createIntersectionObserver([options]) 来代替 具体可以看微信小程序文档 2.由于我们这个区域是一个滚动区域,所以我用了scoll-view,最外层…

Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考虑IE我们也可以在封装组件的时候为其兜底,本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口. 描述 先考虑首屏场景,当做一个主要为展示用的首屏时,通常会加载较多的资源例如图片等,如果我们不想在用户打开时就加载所有资源,而是希望…

温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未来很难保证向后兼容,所以禁用了这个 API,需要手动打开 dom.IntersectionObserver.enabled 才行. 2016.12.30 追加,Firefox 53 已经重新开启. IntersectionObserver API 是用来监视某个元素是否滚动进了浏览器窗口的可视区域(…

比如说,你想跟踪 DOM 树里的一个元素,当它进入可见窗口时得到通知. 也许想实现即时延迟加载图片功能,或者你需要知道用户是否真的在看一个广告 banner. 你可以通过绑定 scroll 事件或者用一个周期性的定时器,然后再回调函数中调用元素的 getBoundingClientRect() 获取元素位置实现这个功能. 但是,这种实现方式性能极差,因为每次调用 getBoundingClientRect() 都会强制浏览器重新计算整个页面的布局,可能给你的网站造成相当大的闪烁. 如果你的站点被…

转载:原文地址:http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html 网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它. 上图的绿色方块不断滚动,顶部会提示它的可见性. 传统的实现方法是,监听到scroll事件后,调用目标元素(绿色方块)的getBoundingClientRect()方法,得到它对应于视口左上角的坐标,再判断是否在视口之内.这种方法的缺点是,由…

写在前面 在移动端,有个很重要的概念,叫做懒加载,适用于一些图片资源特别多,ajax数据特别多的页面中,经常会有动态加载数据的场景中,这个时候,我们通常是使用监听scroll或者使用setInterval来判断,元素是否进入视图,其中scroll由于其特别大的计算量,会有性能问题,而setInterval由于其有间歇期,也会出现体验问题. 1. 关于IntersectionObserver 浏览器的开发商,估计也发现了这个问题,所以在2016年初,chrome51率先提供了一个新的API,就是I…

创建对象 var io = new IntersectionObserver(callback, option); IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:callback是可见性变化时的回调函数,option是配置对象(该参数可选). 构造函数的返回值是一个观察器实例.实例的observe方法可以指定观察哪个 DOM 节点. // 开始观察,参数是观察对象元素 io.observe(document.getElementById('example'))…

网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它. 上图的绿色方块不断滚动,顶部会提示它的可见性. 传统的实现方法是,监听到scroll事件后,调用目标元素(绿色方块)的getBoundingClientRect()方法,得到它对应于视口左上角的坐标,再判断是否在视口之内.这种方法的缺点是,由于scroll事件密集发生,计算量很大,容易造成性能问题. 目前有一个新的 IntersectionObserver API,可以自动"观察&q…