Preload d'un dossier image en jquery

Bonjour,

Je recherche un preload en jquery. Quelque chose qui permet de charger tout le contenu du dossier image pendant qu'on navigue tranquillement sur la home.

J'ai essayé avec cette fonction en listant mes images, mais ça ne marche pas. Est-ce que quelqu'un connait une solution simple à mettre en place ?

Merci de votre aide

$.preLoadAllImages(
     [
'http://www.monsite.fr/images/mon image.jpg',

     ],function(){
          alert();
     }
);

L'idée est assez simple, il faut seulement que tu créé de nouvelles balises images par ton script dans un bloc caché par exemple.

Merci pour votre réponse. Par contre je n'ai pas précisé que je maîtrisais mal le javascript. Du coup là je ss pas certain d'avoir compris la réponse. Est-ce que ca veut dire que mes images doivent se trouver sur la page avec un display: none; ?
Car sinon moi je voulais loader un dossier qui contient les images des autres pages.

Merci et bonnes fêtes

Si tu ne maitrise pas JS, tu peux aussi préaloder tes images en CSS. Par exemple:

<div style="display: none;">
  <!-- met toutes tes images à loader ici -->
  <img src="chemin/vers/images" />
  <img src="chemin/vers/images" />
  <img src="chemin/vers/images" />
</div>

Cela dit, le preloading systématique n'aidera pas nécessairement à améliorer les performances d'un site et il faut bien en comprendre les implications; surtout qu'il y a plusieurs autres leviers à activer niveau performance avant de se sentir obliger de préloader les images (alors qu'aujourd'hui la tendance est plus à l'inverse - le lazy loading)

Et, considère que dans mon exemple, les images seront loadés en même temps que ta page, ce qui créera plus de requêtes lors du premier chargement. L'avantage de JS sera de te permettre d'attendre la fin du loading de ta page avant de lancer tes requêtes supplémentaires.

Par exemple, en JS avec jQuery, tu pourrais faire ainsi :

$(function () { // on attend que la page load

// on utilise le bloc preloader existant ou on en créé un
var preloader = $('#preloader') || $('body').append('<div id="preloader"></div>');

// on s'assure que notre bloc de preloading est caché
preloader.css({display:"none"});

// on y ajoute nos images
preloader.append('<img src="chemin/vers/ton/image">');

});

(P.S. : Je n'ai pas testé, il peut y avoir une typo)

Te suffirait ensuite de créer une boucle pour y insérer toutes tes images par exemple...