Question

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

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

我知道我可以按照它们的重要性来订购我的图像，然后依次下载它们，但我也希望利用异步下载来减少带宽。

有人可以在这推荐任何东西吗？

Answer 1

为什么不使用setTimeout并在每张图片之间稍微增加延迟（500毫秒）。

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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()

按特定顺序下载图像

4 个答案: