3

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

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

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

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

4

4 回答 4

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

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

于 2012-06-25T18:27:31.577 回答
1

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

于 2012-06-25T18:23:29.430 回答
0

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()
于 2012-06-25T18:32:48.773 回答
0

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

于 2012-06-25T18:23:44.310 回答