Предварительная загрузка изображений галереи. JavaScript (без JQuery)

Question

Я экспериментировал с некоторыми изображениями больших размеров файлов, которые будут использоваться в галерее. Я пытаюсь сделать это самым простым способом. Здесь я использую только несколько примеров изображения:

var imageGallery = ["nebula.jpg", "galaxy.jpg", "blackHole.jpg"]; 

for (var i = 0; i < imageGallery.length - 1; i++) { 
    var img = new Image(); 
    img.src = imageGallery[i]; 
} 

я понял, что этот код будет убедиться, что изображения кэшируются перед использованием остальной части сценария, но он не работает.

Справка будет принята с благодарностью.

Answer 1

Возможно, сервер отправляет заголовки, которые предотвращают кэширование, как:

Cache-Control: no-cache, no-store, must-revalidate 
Pragma: no-cache 
Expires: 0 

Answer 2

Вы ищете какой-то асинхронным обратного вызова, вы должны сделать что-то вроде этого:

// Grab reference to image on page 
var img = document.getElementById("blah"); // Or whatever you need to do 

// Create new image from your list 
var galleryImage = new Image(); 

// Create a callback that will start once you assign the src attribute to img 
galleryImage.onload = function() { 

    // Here you could disable a loading icon or something, because your image is ready to go 
    img.src = this.src; 
} 

// Kickoff everything 
galleryImage.src = "www.myimage.com/path"; 

---

В своем коде, который может выглядеть примерно так:

var imageGallery = ["nebula.jpg", "galaxy.jpg", "blackHole.jpg"]; 

for (var i = 0; i < imageGallery.length - 1; i++) { 
    var img = document.document.getElementsByTagName('img')[i]; 
    var galleryImage = new Image(); 

    galleryImage.onload = function() { 
     img.src = this.src; 
    } 

    galleryImage.src = imageGallery[i]; 
}