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

Question

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

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

仅当图像在首屏上方可见时才应使用。

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

该属性仅供高级使用。将图像切换为急切加载通常会损害性能。...我们建议使用优先级属性

那么我应该使用什么来预加载首屏图像呢？

Answer 1

您可以使用图像属性loading="eager"

像这样：

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