在頁面加載之前預加載 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 組件？

在此處閱讀詳細信息： 下一個圖像文檔