預加載圖像與排隊？

我正在尋找的是一種預加載並將特定圖像上移到隊列中的方法。預加載圖像與排隊？

這是我在哪裏至今：http://shivimpanim.org/testsite/imageloader.html

你可以看到它具有圖像預壓，但沒有隊列管理，據我可以告訴（或沒有瀏覽器智能地撞了請求的圖像在隊列中，如果它是最新寫入DOM？）

換句話說，它可能是自然image10接近預加載隊列的末尾......但它可能是用戶在開始時懸停在右邊的位置。所以image10應該撞到隊列的頂部並立即加載。完成後，隊列應該從停止的地方繼續加載。

謝謝！

編輯：現在我已經更新代碼，以便預壓...主要的「陷阱」是該圖像必須被添加到DOM來的onLoad在Firefox觸發Mac和我的具體需要以跟蹤路線上的原始指標（匹配標題等）

似乎工作..但奇怪的是，第二個項目的順序很奇怪（它在項目＃2之前加載項目＃3在自動-模式）。

但所有的清一色它自動加載大多是在正確的順序2項的時間，當用戶將鼠標懸停在鏈接它對顛簸該項目到隊列中，然後顯示它在負載:)

我沒有測試extensively-但螢火事情看起來有些不正常:)

來源

2011-07-15 davidkomer

我其實不確定你在問什麼。你只想學習如何在你的圖像加載時顯示gif？ – vinceh

編輯澄清:) – davidkomer

請提供更多信息。你有什麼嘗試？你在哪堆疊？ - SO不是代碼工廠，你也必須展現一些主動性。 – polarblau

像這樣（未經）：

function loader(images, n_parallel){ 
    this.queue = images.slice(0); 
    this.loading = []; 

    for(var i=0; i<n_parallel; i++) this.dequeue(); 
} 

loader.prototype.dequeue = function(){ 
    if(!this.loading.length){ return; } 

    var img = new Image(), 
     self = this; 
    img.src = this.queue.unshift(); 

    if(img.width){ 
     self.dequeue(); 
    }else{ 
     img.onload = function(){ 
      self.dequeue(); 
     } 
    } 
} 

loader.prototype.promote = function(src){ 
    for(var i=0, l=this.queue.length; i<l; i++){ 
     if(this.queue[i] == src){ 
      this.queue.unshift(this.queue.splice(i, 1)[0]); 
      break; 
     } 
    } 
} 


var imgs = new loader(['foo.jpg', 'bar.jpg', 'foobar.jpg', ...], 2); 
... 
imgs.promote('some_img.jpg');

爲了這個工作，你不能同時添加所有的在頁面加載時將圖像發送給dom。您需要按需添加它們。

來源

2011-07-15 15:42:47

沒有爲我工作...雖然我upvoting你的答案，因爲它確實指向我的方向，幫助:) – davidkomer

正如我所說 - 未經測試，但它應該非常接近:) –

受此啓發和http://fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html，我鞭打我的擁有。隨意評論，分享或使用：https：//github.com/Synclop/PicLoader – Xananax

預加載圖像與排隊？

回答

相關問題