Préchargement des images de la galerie. JavaScript (sans JQuery)

Question

J'expérimentais avec quelques images de grandes tailles de fichier à utiliser dans une galerie. J'essaie de le faire de la manière la plus simple possible. Ici, je me sers seulement quelques exemples d'images:

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]; 
} 

Je compris que ce code serait que les images sont mises en cache avant d'être utilisées par le reste du script, mais il ne fonctionne pas.

L'aide serait appréciée.

Answer 1

Peut-être que le serveur envoie des en-têtes qui empêchent la mise en cache, comme:

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

Answer 2

Vous cherchez une sorte de rappel async, vous devez faire quelque chose comme ceci:

// 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"; 

---

Dans votre code qui pourrait ressembler à ceci:

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]; 
}