问题描述
这似乎适用于典型的图像预加载:
const img = new Image();
img.src = src;
但是,我有两个问题:
-
我的图片很大(大约 200mb),这意味着即使我预加载它们,显示仍然很慢,并且在图像完全渲染之前加载状态值变为 true。
-
我在我的图像上使用缩放,其中我
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:如何预加载不同样式的图像以实现即时缩放渲染而不是缓慢渲染?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)