画像をキューに入れてプリロードしますか？

Question

私が探しているのは、キューに特定のイメージをプリロードしてバンプする方法です。私はこれまででだのはここ

です：http://shivimpanim.org/testsite/imageloader.htmlは

は、あなたが見ることができ、それは、画像プリロードを持っていますが、何のキュー管理は、私の知る限り存在しない（またはブラウザがインテリジェントに要求された画像をつり上げるんキューにDOMに新しく書き込まれた場合）

つまり、自然にイメージ10がプリロードキューの終わりに向かいつつあるかもしれません...しかし、ユーザーが最初に右にホバーオーバーするかもしれません。そのため、image10はキューの先頭にバンプされ、すぐにロードされます。終了すると、キューは途中からロードを続行する必要があります。

ありがとうございます！

EDIT：プリロード作品は...主な「落とし穴」はonLoadのは、Mac上のFirefoxでトリガするために画像をDOMに追加しなければならないということだった、と私の特定のニーズように、私は今、コードを更新しました

2番目のアイテムの順序が奇妙です（2番目のアイテムの前にitem＃3がautoでロードされています） -モード）。

しかし、ユーザーがリンクの上に置いたときに、主に、正しい順序でオールそれ自動負荷の全てが一度に2つの項目、およびそれがキューにその項目をバンプして、負荷:)

時に、それを示しています

私はextensively-テストしていませんが、多少正常に見える:)（未テスト）このような

Answer 1

何かFirebugのもので：

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にイメージが読み込まれます。オンデマンドで追加する必要があります。