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

Question

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

我在下面尝试过这段代码

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

但在下图中看不到。

红线上方是首次加载虚拟导览时。您会看到leefruimte.jpg在 9 毫秒内下载完毕。传输后（红线下方），leefruimte.jpg再次下载，但现在在十二毫秒内。

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

图像navigationCircle.png和focusspot.png, 也不会被预加载。

Answer 1

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

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

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

Pano的源代码Prefetch在加载图像时检查' 的缓存。因此，当您尝试加载Panofor this.thePanoImagenext 时，图像应该在缓存中可用，并且不会被第二次获取。