忽略这通常被认为是一种不好的做法的事实,我试图理解如何在页面过渡或呈现页面之前预加载一组图像。我的用例需要同时显示相当多的大图像文件,并在屏幕上显示动画。我想基本上有一个加载页面上的微调,而大图像的初始集下载和缓存在浏览器中,然后我可以显示他们一次。
如果我想用标准的react来做这件事,我可以这样做:
await Promise.all(
images.map(async (url) => {
return new Promise((resolve) => {
const image = new Image();
image.src = url;
image.onload = () => resolve(true);
});
})
)}
字符串
然后,当所有内容都完成加载时,isLoading
布尔值被翻转。但是,使用nextjs Image
组件,我无法加载这些初始图像,直到它们实际添加到dom中。这些图片的URL会根据不同的条件而变化,所以我不能真正使用原始的解决方案来预加载它们。
有没有一种方法可以强制浏览器在我的nextjs <Image>
组件生成的图像源被添加到dom之前下载它们?
1条答案
按热度按时间uxh89sit1#
你有没有试过在Image组件中添加priority=true?
在此阅读详情:下一图像文档