Comment précharger une image en utilisant jQuery

Question

Salut J'ai un projet dans lequel l'une des pages a une galerie. Quelque chose comme ça:

<div id="gallery" class="sections"> 
     <img src="Images/Image1.jpg" class="thumbnails"> 
     <img src="Images/Image2.jpg" class="thumbnails"> 
     <img src="Images/Image3.jpg" class="thumbnails"> 
     etc... 
</div> 

Je voudrais précharger ces images de sorte que lorsque vous accédez à la page de la galerie, ils sont déjà chargés. Je sais que vous pouvez le faire en utilisant javascript. Quelque chose du genre:

var myImage = new Image(); 
myImage1.src = "Images/Image1.jpg"; 
etc... 

Ce dont je ne suis pas sûr, c'est la prochaine étape. Est-ce que je retire le src du html et ajouter un identifiant, comme ceci:

<div id="gallery" class="sections"> 
     <img id="image1" class="thumbnails"> 
     <img id="image2" class="thumbnails"> 
     <img id="image3" class="thumbnails"> 
     etc... 
</div> 

puis faire quelque chose comme ça:

$('#image1').append(myImage1); 

Cela n'a pas fonctionné ... J'ai aussi essayé:

$('#image1').attr('src','Images/Image1.jpg'); 

Et cela n'a pas fonctionné non plus.

J'ai jeté un coup d'oeil autour et il ya beaucoup de tutoriels sur la façon de faire une fonction qui précharge vos images etc ... mais je ne suis pas tout à fait encore là. Je voudrais juste savoir comment le faire sur une base par un pour l'instant et puis peut-être créer une fonction. Merci.

Answer 1

Ils sont plusieurs fonction pour le faire Les images sont chargées dans le DOM lorsque la page est ouverte, mais pas visible. Ensuite, quand vous voulez les montrer (Au clic, sur un curseur, ...), pas de temps de chargement!

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
     // Alternatively you could use: 
     // (new Image()).src = this; 
    }); 
} 

// Utilisez votre fonction avec tout votre chemin d'image

preload([ 
    'img/imageName.jpg', 
    'img/anotherOne.jpg', 
    'img/blahblahblah.jpg' 
]);