Bild ändern jQuery ohne eine neue Anfrage an den Server

Question

Ich benutze jQuery, um ein Hintergrundbild jede Sekunde zu ändern. Das funktioniert, wie ich will, aber wenn ich auf die Registerkarte NETWORK in Google Chrome schaue, sehe ich, dass eine neue GET-Anfrage für das Bild jede Sekunde gemacht wird, was offensichtlich sehr unwirtschaftlich ist. Kann mir jemand einen besseren Ansatz raten hier einzunehmen. Ich habe in anderen Beiträgen gelesen, dass die Bilder zwischengespeichert werden sollten und dass der Browser wissen sollte, dass er keine Anfrage an den Server stellt, aber soweit ich das beurteilen kann, macht der Browser immer noch die Anfrage.

Bitte beachten Sie den aktuellen Code unten.

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

Sie möchten die Bilder dann vorab laden.

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); 

Denken Sie jedoch daran, dass auf der Netzwerkregisterkarte eine Abrufanforderung für die Bilder angezeigt werden kann. Aber Sie sollten sehen, dass die Antwort zwischengespeichert wird. Der Server teilt Ihrem Browser mit, dass sich das Bild nicht geändert hat/er kennt das Bild bereits und überträgt keine Daten.

Answer 2

müssen Sie alle Bilder in Körper Vorspannung vor, dass die Schleife laufen