判断元素是否在可视区域

Cristalven 发布于2019-08-23 12:21 / 3537人阅读

摘要：如果要实现图片懒加载需要去判断图片是否在可视区域。判断方法判断一个元素是否在可视区域，我们有通常有两种办法，第一种是使用元素的属性的值和页面的进行对比如果的值小于表示元素在可视区域内。

前言

图片懒加载在网站运用图片比较多的时候回用到，图片懒加载可以让不在可视区域的图片不去加载，避免一次性加载过多图片导致请求阻塞，提高网站加载速度和用户体验。如果要实现图片懒加载需要去判断图片是否在可视区域。

判断方法

判断一个元素是否在可视区域，我们有通常有两种办法，第一种是：使用元素的 getBoundingClientRect 属性的 top 值和页面的 clientHeight进行对比, 如果top的值小于 clientHeight表示元素在可视区域内。这种方式的缺点是需要监听scroll事件，第二种是利用高级特性 Intersection Observer 来判断元素是否可见，这种方式不用监听scroll事件，元素可见变调用回调，在回调里面处理。

getBoundingClientRect

用法： rectObject = object.getBoundingClientRect()

返回一组用于描述元素的只读属性-left, top,right,botton, width, height,除了width和height外的属性都是相当于于视口左上角而言的。bottom和right于正常的有所不同

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。

为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码：

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollLeft == "number" ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollTop == "number" ? t : document.body).scrollTop

Intersection Observer

用法：

参考：https://juejin.im/post/5bbc60...

GPU云服务器云服务器判断可视区域可视区域 html可视区域区域可视化

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

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

如何判断元素是否在可视区域ViewPort

摘要：在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性，不包括滚动条。个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出...

jayzou 2019-08-23 13:43 评论0 收藏0
如何判断元素是否在可视区域ViewPort

摘要：在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性，不包括滚动条。个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出...

xiguadada 2019-08-02 12:06 评论0 收藏0
如何判断元素是否在可视区域ViewPort

摘要：在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性，不包括滚动条。个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出...

zhigoo 2019-08-29 17:24 评论0 收藏0
图片加载相关技术

摘要：本小节将讨论与图片加载时机相关的技术预加载与懒加载。同样，可将请求成功与失败的回调，作为图片预加载成功与失败的处理。目前，出于性能与灵活性方面的考虑，我们都将一些小图片替换成矢量图或者字体。除了这些能被替换的小图之外，还有一些不得不使用位图的场景，如照片、背景等。对于这些位图，我们需要考虑它们在加载过程中的不同状态，而制定不同的表现方案。图片加载过程中的状态，大致包括：何时决定...

ZweiZhao 2019-08-20 14:47 评论0 收藏0