イメージオブジェクトを使用してキャッシュなしでイメージをプリロードできますか？

Question

私は、サーバ上にある画像ファイルが最初の読み込み期間の後に遅延なしでDOMに追加できるように（ほぼ）保証する方法を見つけようとしています。

私のような標準のプリロード技術を使用してきた：

var images_to_load = ['img1.png', 'img2.png', 'img3.png']; 
for(var i=0; i<images_to_load.length; i++){ 
    var img = new Image(); 
    img.src = images_to_load[i]; 
} 

しかし、私はこれが動作するかどうかは、サーバーとブラウザの設定だけでなく、ロードする画像の数などの要因に依存していることを学びました。

イメージをメモリに格納してから、Imageオブジェクトを直接DOMに追加すると、プリロードの動作が変更されるのだろうかと思います。これはキャッシュをバイパスしますか？たとえば、次のように

var images_to_load = ['img1.png', 'img2.png', 'img3.png']; 
var images = []; 
for(var i=0; i<images_to_load.length; i++){ 
    var img = new Image(); 
    img.src = images_to_load[i]; 
    images.push(img); 
} 

document.getElementById('target').appendChild(images[0]); 

（これに関連して：行動のこの種をテストするためにはどんなツールがありますか？）

Answer 1

それらがそれぞれロードされることを保証する唯一の方法は、ロードイベントハンドラ

for(var i=0; i<images_to_load.length; i++){ 
    var img = new Image(); 
    img.src = images_to_load[i]; 
    images.onload = function(){ 
    document.getElementById('target').appendChild(img); 
    }; 
} 

を使用することです

これは、配列の順序ではなく読み込まれた順に追加されます。

キャッシュの場合、キャッシュされた画像はすべて読み込み時間が大幅に短縮されます。すべて