按特定顺序下载图片

我正在实施一项显示产品360度视图的功能。该视图由从服务器下载的一系列独立图像表示。按特定顺序下载图片

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

我知道我可以按照它们的重要性排序我的图像，并依次下载它们，但我想利用异步下载来降低带宽。

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

2012-06-25 akonsu

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

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-25 18:27:31

为什么不只是使用setTimeout，并且每张图像之间的延迟（500毫秒）略微增加。

来源

2012-06-25 18:23:29

你的意思开始第一个图像，稍等一下，然后继续到下一个，而无需等待前一个完成？ – akonsu

超时不能保证设置图像加载顺序。您必须挂钩onload事件，然后加载下一个图像。 –

@Diodeus - 通过为超时选择一个合理的值让它更有可能，但是，无论如何，较早的应该比后一个加载得更快，因为如果有10张图片，最后一个可能比第一个。 –

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

来源

2012-06-25 18:23:44

是的。我试图确保首先下载我的“重要”图像。 – akonsu

他们将按照您分配的顺序开始下载。如果重要图像比其他图像更大，它们可能会稍后完成，但您可以在此之前隐藏不太重要的图像。 –

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-25 18:32:48 cuzzea

按特定顺序下载图片

回答

相关问题