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

Question

我正在使用React VR进行虚拟旅行，并在用户从房间运输时预加载下一张全景图像。在预加载后，我将使用本地磁盘缓存中的映像。

我在下面尝试过这段代码

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

但它没有在下面的图片中看到。

红线上方是虚拟游览第一次加载的时间。你看到leefruimte.jpg是在9毫秒内下载的。运输后（在红线下），再次下载leefruimte.jpg，但现在在12毫秒内。

我接受图像leefruimte.jpg是从场景零中加载的图像中取出并被缓存的。

此外，图像navigationCircle.png和focusspot.png不会被预加载。

Answer 1

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

Prefetch当时只适用于Panos，但看起来它足以满足您当前的需求。

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

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