javascript - 按特定顺序下载图像

Question

我正在实现一项显示产品 360 度 View 的功能。 View 由从服务器下载的一系列独立图像表示。

从用户体验的 Angular 来看，序列中的某些图像比其他图像更重要。因此，当我的代码下载图像时，我想先获取重要的图像并立即显示它们，然后再获取不太重要的图像。

我知道我可以按图片的重要性排序并依次下载它们，一个接一个，但我也想利用异步下载来减少带宽。

有人可以在这里推荐什么吗？

Answer 1

您可以在第一波中加载最重要的图像，然后像这样加载其他图像:

var firstImages = [];
var otherImages = [];

var count = firstImages.length;

var onloadfirstwave = function() {
   if (--count==0) {
      // lauches second wave
   }
};
// and for each image, do
firstImages[i].onload = onloadfirstwave;
firstImages[i].src = "someurl";

只有在加载第一批图像后才会启动第二波，并且将保留第一批加载的并行性。