より効率的な方法にプリロードイメージ

Question

画像をプリロードするためのより良い方法は何ですか：

$.each(['{{ MEDIA_URL }}jwplayer/jwplayer.js', 
     '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz', 
     '{{ MEDIA_URL }}jwplayer/player.swf'], function() { 
    $('<img/>')[0].src = this; 

か：

は

var preloadImages = ['{{ MEDIA_URL }}jwplayer/jwplayer.js', 
        '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz', 
        '{{ MEDIA_URL }}jwplayer/player.swf']; 
var imgs = []; 
for (var i=0; i<preloadImages.length; i++) { 
    imgs[i] = new Image(); 
    imgs[i].src = preloadImages[i]; 
} 

何が他よりも良いものを作るには？

Answer 1

jQueryの過度のbloatwareに対する単純なJavaScriptのため、2番目の方が最初の方が優れています。

l=preloadImages.lengthを最前面に設定し、ループ内でそれを使用することで、少し改善することができます。

Answer 2

どちらも同じことです。最初のスニペットはjQueryを使用しており、2番目のスニペットはjQueryを使用していません。この目的のためだけにjQueryを使用する理由はありません。したがって、別の場所でライブラリを使用していない場合は、2番目のバージョンに移動してください。サイト全体でjQueryを使用している場合は、最初のものもOKです。

Answer 3

2番目の方が高速です。 1つ目は、（jQueryでより高いレベルのイテレータメソッドを使用することによって）タイピングが少なくなることです。

あなたのプロジェクトですでに他の理由でjQueryを使用している場合は、スピードやコードサイズを最適化するかどうかによって、より良い結果が得られます。

技術的なレベルでは、実際の実装の違いが1つあります。第2のバージョンは、変数内にイメージオブジェクトの配列を保持します。最初は、イメージオブジェクトにガベージコレクションをさせます。