在页面加载之前预加载 nextjs 图像

Question

忽略这通常被认为是一种不好的做法这一事实，我试图了解如何在页面转换之前或在呈现我的页面之前预加载一组图像。 我的用例需要同时显示相当多的大图像文件并在屏幕上设置动画。 我想在页面上有一个加载微调器，同时将初始的大图像集下载并缓存在浏览器中，然后我可以一次显示它们。

如果我想用标准反应做到这一点，我可以这样做：

    await Promise.all(
        images.map(async (url) => {
            return new Promise((resolve) => {
                const image = new Image();
                image.src = url;
                image.onload = () => resolve(true);
            });    
        })
    )}

然后让isLoading boolean 在所有内容加载完成后翻转。 但是，使用 nextjs Image组件，在将它们实际添加到 dom 之前，我无法加载这些初始图像。 这些图像的 URL 会根据各种条件而变化，因此我不能真正使用原始解决方案来预加载它们。

有没有办法强制浏览器在将我的 nextjs <Image>组件生成的图像源添加到 dom 之前下载它们？

Answer 1

您是否尝试将 priority=true 添加到 Image 组件？

在此处阅读详细信息： 下一个图像文档