我可以使用React VR預加載和緩存圖像嗎？

Question

我正在使用React VR在房子裏進行虛擬遊覽，並在用戶從房間運輸時預加載下一張全景圖。預加載後，我會使用本地磁盤緩存中的圖像。

我試過下面

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

這個代碼，但它不會對下面的圖片查看。

上面的紅線是當虛擬旅遊正在加載首次。您看到leefruimte.jpg是在九毫秒內下載的。運輸後（在紅線下），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的緩存加載圖像時。因此，當您嘗試下一步爲this.thePanoImage加載Pano時，該映像應在緩存中可用，並且不會再被第二次獲取。