javascript - Pre-loading/caching images in with different styles JS/React.JS

Question

I have to display large images and have been trying to preload them.

This seems to kind of work with the typical image preloading:

    const img = new Image();
    img.src = src;

however, I have 2 issues:

1. My images are large (around 200mb), this means that even if I preload them, displaying is still slow, and the loading state value becomes true earlier than the image is fully rendered.

2. I am using a zoom on my image where I transform: scale(x) where x can be = to a range of 1 to 8;

For point 2., When playing with my zoom, I realized that once loaded once with, let's say scale(3), whenever I came back to that scale(3), the image was preloaded and it displayed almost instantly. So I decided to try and preload the image with the scaled style as well as the normal image, I used a promise and iterated to create 16 images (I have 2 images that can scale to 8).

        const promises = await srcArray.map((src => {
            [...Array(7)].map(((_,i) => {
                return new Promise((res, rej) => {
                    const img = new Image();
                    img.src = src;
                    Object.assign(img.style, { transform: `scale(${i+1})`})
                    img.onload = res();
                    img.onerror = rej();
                    console.log(img)
                })
            }))
        }))

question 1: How can I make sure that the images are only shown once they are ready to be displayed instantly rather than slowly?

question 2: How can I preload images with different styles to have instant zoom rendering rather than slow?

question from:https://stackoverflow.com/questions/65647479/pre-loading-caching-images-in-with-different-styles-js-react-js

Answer 1

Waitting for answers