按特定順序下載圖片

我正在實施一項顯示產品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

按特定順序下載圖片

回答

相關問題