在 Next.js 中预加载首屏下方的图像

Question

我有一个按钮，如果单击该按钮，则会显示图像。 我希望在单击按钮之前预加载图像。 按钮和图像位于首屏下方。

起初，我打算使用Image组件的priority属性，但文档说：

仅应在图像在折叠上方可见时使用。

所以，然后我查看了loading属性，但文档说：

此属性仅用于高级用途。 使用 eager 切换图像加载通常会损害性能。 ...我们建议改用 priority 属性

那么我应该使用什么来预加载折叠图像？

Answer 1

您可以使用 Image 属性loading="eager"

像这样：

<Image src={'/images/img.jpg'} loading="eager" priority={true} />