イメージを変更するサーバーに新しいリクエストを作成せずにjQuery

Question

jQueryを使用して毎秒背景イメージを変更しています。しかし、私が望むように動作していますが、Google ChromeのNETWORKタブを見ると、毎秒新しいGETリクエストが1秒ごとに行われることがわかります。これは明らかに非常に経済的です。誰でもここに行くよりよいアプローチをアドバイスできますか？私は、画像をキャッシュし、ブラウザがサーバに要求しないことを知っているべきであることを他の投稿で読んだが、ブラウザが依然としてリクエストを行っていると言うことができる。

下記の現在のコードをご覧ください。

var x = 0, 
homepageImages = ["1","2","3","4"]; 

setInterval(function(){ 
    x++; 
    if(x === 4){ 
    x = 0; 
    } 
    $('.desktop-main-img').attr('src', 'img' + homepageImages[x] + '.jpg'); 
}, 1000); 

Answer 1

イメージをあらかじめ読み込みたいとします。

var x = 0, 
homepageImages = ["1", "2", "3", "4"]; 

// invisible preload the images 
for(var i = 0; i < homepageImages.length; i++) 
    $(new Image()).src('img' + homepageImages[i] + '.jpg'); 

setInterval(function() { 
    x = ++x === 4 ? 0 : x; 
    $('.desktop-main-img').attr('src', 'img' + homepageImages[x] + '.jpg'); 
}, 1000); 

ただし、ネットワークタブに画像の取得リクエストが表示されることがあります。しかし、あなたは、応答がキャッシュされていることを確認する必要があります。サーバーは、画像が変更されていない/既に画像を認識していて、データを転送していないことをブラウザに伝えます。

Answer 2

あなたはその前にループを実行し、体内のすべての画像をプリロードしなければならない