我可以使用 React VR 预加载和缓存图像吗?

Can I preload and cache images using React VR?

我正在使用 React VR 在房屋中进行虚拟游览,并会在用户从房间移动时预加载下一张全景图像。预加载后,我将使用本地磁盘缓存中的图像。

我试过下面这段代码

<Pano style={{ display: 'none' }} source={asset(`360/${this.thePanoImage}`)} />

但在下图中没有看到。

红线上方是第一次加载虚拟游览时。您会看到 leefruimte.jpg 在 9 毫秒内下载完毕。传输后(红线下),再次下载leefruimte.jpg,但现在是十二毫秒。

我接受图像 leefruimte.jpg 取自场景 0 中加载的图像并被缓存。

也不会预加载图像 navigationCircle.pngfocusspot.png

注意:这很可能在未来发生变化,但在撰写本文时,您可以查看 Prefetch 组件。

Prefetch 目前仅适用于 Panos,但看起来足以满足您当前的需求。

import {Prefetch} from 'react-vr';
...
...
render() {
    return (
        ...
        <Prefetch key={someUniqueKey} source={asset(`360/${this.thePanoImage}`)} />
        ...
    );
}

Panosource code 在加载图像时检查 Prefetch 的缓存。因此,当您接下来尝试为 this.thePanoImage 加载 Pano 时,该图像应该在缓存中可用并且不会被再次获取。