javascript - 有没有一种自动方法来检测 html 元素(标签)何时出现在屏幕上？

Question

想象一下，您想要优化由大量轮播式 View 以及富含图像和媒体资源的长滚动内容组成的网页上的资源加载过程。

我正在使用 Angular(AngularJs，而不是 Angular 2)实现一个类似 Netflix 的画廊。我有我的自定义指令(在 Angular 中，您应该使用指令方法来声明自定义元素和属性)，它工作得很好，但现在我想使用类似于 Android 上的虚拟中继器、 Angular Material 或 View 适配器的技术。

我可以使用代码来计算位置和元素来检测屏幕上的内容，但我真的想要一种更直接的方法。就像事件监听器或其他东西。有些东西我可以用一般的方式使用。

Answer 1

没有办法用监听器做到这一点。您所能做的就是使用 Element.getBoundingClientRect()

它将返回您到视口(viewport)顶部、底部、左侧和右侧的距离(视口(viewport)是用户实际看到的)。值得一提的是，您也可以仅在 DOM 中已有的元素上使用它 - 不幸的是它会影响性能。