使用不同样式的 JS/React.JS

如何解决使用不同样式的 JS/React.JS

我必须显示大图像并且一直在尝试预加载它们。

这似乎适用于典型的图像预加载：

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

但是，我有两个问题：

1. 我的图片很大（大约 200mb），这意味着即使我预加载它们，显示仍然很慢，并且在图像完全渲染之前加载状态值变为 true。

2. 我在我的图像上使用缩放，其中我 transform: scale(x) 其中 x 可以是 = 到 1 到 8 的范围；

对于点2.，在玩我的变焦时，我意识到一旦加载一次，比如说scale(3)，每当我回到那个scale(3)时，图像就会被预加载并且它几乎立即显示。所以我决定尝试使用缩放样式和普通图像预加载图像，我使用了一个承诺并迭代创建了 16 个图像（我有 2 个可以缩放到 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)
                })
            }))
        }))

问题 1：如何确保图像仅在准备好立即显示时才显示，而不是缓慢显示？

问题 2：如何预加载不同样式的图像以实现即时缩放渲染而不是缓慢渲染？