我写了一个图像加载函数,如下所示:
export function loadImage(url: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
if (image_map.has(url)) {
resolve(image_map.get(url));
} else {
let image: HTMLImageElement = new Image();
if (typeof window.static_url != 'undefined' && url[0] == '/') {
image.src = `${window.static_url}${url}`;
} else {
image.src = url;
}
image_map.set(url, image);
image.crossOrigin = 'Anonymous'; // Prevent canvas getImageData CORS issue
image.onload = function () {
resolve(image);
};
image.onerror = reject;
}
});
}
我有大约200张图片要加载,在问这个问题之前,我一直在编写这样的代码:
for (let url of image_list) {
await loadImage(url);
}
我花了很长时间(16秒或更长)才加载所有这些图像。
今天我决定从代码中删除await
,奇迹发生了:图像加载过程在2s内完成。这怎么可能呢?我以为javascript是单线程的,我曾期望,通过删除await
,图像加载应该简单地发生在之后我的代码的其余部分,而不是发生在之前,但他们加载的总时间应该没有太大的差异。
1条答案
按热度按时间hmae6n7t1#
当前代码以串行方式加载图像(一个接一个)。
您可以改为使用promise all并行执行它们。
或者更简洁些。