在正文中延迟加载图像时，错误地滚动到某个部分的视图 javascript

Question

在我的网站上，我必须对图像使用延迟加载效果来优化我网站的性能<img src="source_img" alt="img_alt" loading="lazy"/> 。 但是如果我有一个带有 function go 的button到此页面内的某个部分，我就会遇到问题。 我使用element_scrolled_into.scrollIntoView({ behavior: 'smooth' }) 。 当然，当点击这个按钮时，页面将滚动到添加事件的部分。 但是 position 滚动由于延迟加载图像而错误地工作。

演示：演示代码和框链接

截图： Deme 截图

首先，它工作不正常，因为那时还没有加载图像。 在那之后，它自然地工作，当然，图像被加载，所以这里没有错误。

首先，它工作不正常，因为那时还没有加载图像。 在那之后，它自然地工作，当然，图像被加载，所以这里没有错误。 有解决此错误的解决方案吗？

Answer 1

如果我正确理解你的问题，那就是图像不会占用空间，并且页面不会通过图像加载跳转。 对于渲染和防止这些重新设计始终为这些资产（如图像）提供宽度和高度属性非常重要。