如果在滚动后出现图像，则会延迟加载图像（跨浏览器问题）

Question

我目前正在构建一个库，它使浏览器能够在滚动后出现在视口中时懒洋洋地加载图像，这意味着不会过度移动移动连接。它在Chrome中完美运行，但在最新的Firefox中存在问题。据我所知，在布局图像时存在问题（因为有些图像在加载页面后没有出现在正确的位置，尽管它们应该）或者在window.innerHeight的跨浏览器支持中。我尝试使用其他方法来避免innerHeight甚至尝试jQuery但问题仍然存在。 我如何解决我的问题？

Codepen example（您可能需要在Codepen中调整视口大小）

提前致谢。

更新

• 事实证明，offsetTop在Firefox中连续的图像之间存在显着差异。
• 即使明确指定了width - 和height - 属性，检查员也会为opacity: 0;的图像提供错误的尺寸（例如，480x480变为0x19） 。您可以使用getComputedStyle(element).width或getComputedStyle(element).height或解析element.outerHTML而不是阅读element.height - 属性来获得正确的维度。如果图片在Firefox中有display: inline-block;，则element.height可再次使用，其行为与Chrome相同。
• 可以通过计算offsetTop来估算预期的element.offsetTop - parseInt(getComputedStyle(element).height)。因此，图像几乎在+ y方向上移动了整个高度。
• display: flex;似乎解决了呈现问题，但必须有一种方法可以在没有flexbox的情况下解决它。

仍然缺少解决方案。