我正在使用 React VR 在房子里进行虚拟游览,并且当用户从房间转移时会预加载下一张全景图像。预加载后,我将使用本地磁盘缓存中的图像。
我已经尝试过下面的代码
<Pano style={{ display: 'none' }} source={asset(`360/${this.thePanoImage}`)} />
但在下图中看不到。
红线上方是虚拟游览首次加载的时间。您会看到 leefruimte.jpg
在九毫秒内下载完毕。传输后(红线下方),leefruimte.jpg
会再次下载,但现在只需 12 毫秒。
我接受图像 leefruimte.jpg
是从场景零中加载的图像中获取并已缓存。
图像 navigationCircle.png
和 focusspot.png
也不会被预加载。
最佳答案
注意:这很可能在未来发生变化,但在撰写本文时,您可以查看 Prefetch组件。
Prefetch 当时仅适用于 Panos,但看起来足以满足您当前的需求。
import {Prefetch} from 'react-vr';
...
...
render() {
return (
...
<Prefetch key={someUniqueKey} source={asset(`360/${this.thePanoImage}`)} />
...
);
}
Pano
的 source code加载图像时检查 Prefetch
的缓存。因此,当您接下来尝试加载 this.thePanoImage
的 Pano
时,该图像应该在缓存中可用,并且不会再次获取。
关于browser-cache - 我可以使用 React VR 预加载和缓存图像吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43953988/