Javascript 按特定顺序下载图像

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

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

我知道我可以按图像的重要性排序，然后依次下载，但我也想利用异步下载来减少带宽

---

有人能推荐一下吗？

为什么不直接使用

设置超时

并稍微增加每个图像之间的延迟（500毫秒）。

浏览器为您处理异步加载，这也是限制并行下载数量的原因。只需以正常方式预加载图像。你不需要任何特别的东西。

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

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";

---

第二次浪潮只有在第一批图像加载后才会启动，并且这些第一批图像的并行性将得到保留。

html可以用js或html创建。 Html版本： ...

var images=['img1.jpg'，'img2.jpg'，…]，
指数=0；
函数加载\u下一个\u图像（）{
如果（指数）。我试图确保我的“重要”首先下载图像。它们将按照您指定的顺序开始下载。如果重要图像比其他图像大，它们可能会在稍后完成，但您可以在那之前隐藏不太重要的图像。您的意思是从第一个图像开始，稍等片刻，然后继续下一个图像，而不等待前一个图像完成吗h？超时不能保证设置图像加载顺序。您必须挂接到onload事件，然后加载下一个图像。@Diodeus-通过为超时选择一个合理的值，您可以使其更有可能加载，但无论如何，较早的加载速度应该比较后的加载速度快，因为如果有10张图片，最后一张可能会在5秒后启动第一个。
var images = ['img1.jpg','img2.jpg',...],
    index = 0;
function load_next_image(){
  if(index<images.length){
    // if you want to create the img from js
    // this is the place to do so
    $('#img'+index).attr('src',images[index]).onload(load_next_image);
    index++;
  }else{
    // all images loaded
  }
}
load_next_image()