在javascript主体内延迟加载图像时,错误地滚动到视图中的一个部分

tp5buhyn  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(107)

在我的网站上,我不得不对图片使用延迟加载效果来优化我的网站性能<img src="source_img" alt="img_alt" loading="lazy"/>。但是如果我有一个button,它有一个函数转到这个页面内的一个部分,我会遇到一个问题。我使用element_scrolled_into.scrollIntoView({ behavior: 'smooth' })。自然地,当点击这个按钮时,页面会滚动到添加事件的部分。但是位置滚动工作错误,因为延迟加载图片。
演示:Demo codesandbox link
截图:Deme screenshot
第一个是错误的,因为当时没有加载图像,之后就正常了,当然加载了图像,所以这里没有bug。
第一,它工作不正常,因为当时没有加载图像。之后,它工作正常,当然加载了图像,所以这里没有bug。有没有解决这个bug的方法?

qlzsbp2j

qlzsbp2j1#

如果我没理解错的话,你的问题是图像加载时不会占用空间和页面跳转。对于渲染和防止这些重新排序,始终为这些资源(如图像)提供宽度和高度属性非常重要。

相关问题