i have problem caching image i set to canvas

[Mohammad-Ravand]

i am using react , i have component name ShowImage360Degree, this component show one image in panorama and when user click on close button, this component will destroyed, at first time pannellum for get image sent xhr request to get image from server, for second time this will happend a gain, i want cache image at first time and using a gain without sending request to server for subsequent times,

i try to load image with new Image() in javascript and after this loaded add image to pannellum.viewer() but not working , every time i have resource to download a gain.

this is my code:

import   { useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import { getActiveCanvasPolygonInfos } from '../../store/features/store';
import  'pannellum'
import  'pannellum/build/pannellum.css'
export default function ShowImage360Degree() {
    const activeCanvasPolygonInfos = useSelector(getActiveCanvasPolygonInfos);
    // let exampleImageUrl = 'https://demo.sirv.com/panoramas/civic.jpg';
    let image = 'http://example.com/'+activeCanvasPolygonInfos?.details?.image;
    const containerRef = useRef(null);
    function initNewPanaroma(imageUrl) {
        const result   = window.t=pannellum.viewer('panorama', {
            "type": "equirectangular",
            "panorama": imageUrl,
            "autoLoad": true,
            "hfov": 180,
            "pitch": 0,
            
            "minYaw": -178,
            "maxYaw": 175,
            "autoRotate": -2
        });
        console.log(result)
    }

    function getImageId(){
        let imageName = activeCanvasPolygonInfos?.details?.image;
        // Split the string by dot
        var parts = imageName.split('.');

        // Take the first part (before the dot)
        return 'image_'+parts[0];
    }

    function cacheImage(){
        console.log('document', document)
        let imageElement = document.querySelector('#'+getImageId());
        if(!imageElement){
            let imageElement = new Image();
            imageElement.src = image;
            imageElement.style.opacity='0'
            imageElement.style.zIndex='-1';
            imageElement.style.position='absolute';
            imageElement.style.left='-9999999'
            imageElement.id = getImageId()
            imageElement.onload  = () => {
                console.log('image addeed')
                document.body.append(imageElement);
                initNewPanaroma(imageElement.src)
            }
        }else{
            
            initNewPanaroma(imageElement.src)
        }
    }
    useEffect(() => {
        cacheImage()
        
    }, []);
    return (
        <>
            <div  ref={containerRef} className='w-full h-full mb-2 overflow-y-hidden bg-transparent' id="panorama">
            </div>
        </>
    );
}

[mpetroff]

every time i have resource to download a gain

You should check the headers on your server. Pannellum loads the images using standard XHR, and caching is handled by the browser, not Pannellum.

i try to load image with new Image() in javascript and after this loaded add image to pannellum.viewer()

This doesn't accomplish anything. If you have caching properly configured, this isn't necessary, e.g., the examples on pannellum.org load from cache without issue. If you still want to do something like this, you need to use createImageBitmap to convert the Image to an ImageBitmap and pass that to Pannellum instead of the URL.

[Mohammad-Ravand]

Thank you very much for your reply, I will definitely try it.