Preloader in canvas game - how to actually understand that all canvas objects are rendered?

Question

JavaScript

I'm trying to make a simple but complete game with levels etc.
I want to make a preloader, after which the drawn canvas would appear without delay.
And there are some very large uploadable images.
The scheme implies that the part that is responsible for drawing will not start drawing if, for example, imagesReady === false;
I add all loaded images to the array of objects, and try to check their readiness and be drawn like this

loadResourches(){
        let t = setInterval(()=>{
            let isLoad = this.gameObjects.toLoadResourches.every(item=>{
                return item.object.complete != 0
                    || item.object.naturalHeight != 0;
            });
            if(isLoad){
                this.canvas.go();
                clearInterval(t);
            }
        }, 50);
    }

Pictures seem to be loading, but especially on a weak computer I noticed that after a successful event, as far as I understand, pictures in the browser cache, there is still a delay in rendering, tk. you need to spend time on the drawing itself.
How do I understand when the canvas is ready to quickly draw the first frame (after all, all subsequent frames work fine at high fps) and remove the preloader, does anyone have experience