Search code examples
browser-cachepreloadreact-360

Can I preload and cache images using React VR?

I'm making a virtual tour in a house using React VR and would preload next panorama image when the user transport from room. After preload I would use the image from the local disk cache.

I've tried this code below

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

But it doesn't see on image below.

Network output

Above the red line is when the virtual tour is loading for the first time. You see leefruimte.jpg is downloaded in nine milliseconds. After transportation (under the red line), leefruimte.jpg is downloaded again, but now in twelve milliseconds.

I'm accepting that the image leefruimte.jpg was taken from the loaded image in scene zero and was cached.

Also the images navigationCircle.png and focusspot.png, wouldn't be preloaded.

Solution

  • Note: This is most likely going to change in the future, but at the time of writing, you can look into the Prefetch component.

    Prefetch only works with Panos at the time, but it looks like it's enough for your current needs.

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

    Pano's source code checks for Prefetch's cache when loading an image. So when you try and load the Pano for this.thePanoImage next, the image should be available in the cache and won't be fetched a second time.