Javascript 如何滚动到页脚处仍未渲染的图像？ 上下文

我在页面的页脚处有一个图像，如

|header|
\\\\\\\\
\\\\\\\\
\\\\\\\\
|image|
\\\\\\\\
\\\\\\\\
|footer|

要滚动到所述图像，我使用：

image.scrollIntoView()

问题 但它仅在浏览器完全加载图像时才起作用。但是，如果页面未加载，则页面不会滚动到该页面，因为图像尚未渲染，并且没有右偏移量

但是，当我将它绑定到

onload

时，它确实可以工作

window.onload = function(){
  image.scrollIntoView()
}

不幸的是，这会导致糟糕的用户体验，因为：

• 除图像（仍在下载）外，将加载整个页面
• 所以用户已经在检查站点了
• 当图像完全加载时，就会出现滚动
• 这是非常不和谐的，对用户/我来说很烦人，因为我希望页面在加载时自动滚动到它，然后检查站点（一点也不检查站点，只是突然将我滚动回图像）

解决方案-父容器 因此，在加载图像的情况下，可以构建一个查看器父元素，该元素已经具有已知的维度，并且可以在其中加载图像。此图像可以是：

• 伸展
• 最大高度/宽度（和截断）
• 最大高度/宽度（和填充）

比如：

document.addEventListener（“DOMContentLoaded”），_=>{
//DOM完全加载时的处理程序
const img=document.querySelector（“#MainImage5”）
setTimeout（U8;=>{
img.scrollIntoView（）
}, 50)
});
图{
显示：块；
高度：500px；
溢出：隐藏；
位置：相对位置；
}
图>img{
位置：绝对位置；
左：50%；
排名：0；
底部：0；
转化：translateX（-50%）；
身高：100%；
显示：块；
}
标题，
页脚{
填充：1em；
背景：ff9800；
颜色：白色
}
页脚{
背景：#4caf50
}

这是标题

另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点


另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点
另一点

我是页脚
试试这个
image.onload=function（）{image.scrollIntoView（）}
@IvanKaraman same它会等到图像完全加载后才滚动到我的站点中的一个图片页上，但如果我有5张图片同时加载，就像MainImage1 MainImage2 MainImage3 MainImage4 MainImage5一样，并希望转到5，则会出现相同的问题，并且是的，将id更改为（“#MainImage5”）尝试使用500px高度图像更新它以适合您的用例，继续尝试。这一次照片是4K（对于第二张图片）是的，但将相同图片的5张叠加在一起，并告诉脚本滚动到第五张图片，然后出现相同的问题，并停留在Begging Figure上。现在，所有图片都具有固定高度，动态宽度我认为这是可行的，因为高度是固定的500px，但我的意思是500px图像与高度自动