Précharger toutes les images dans un répertoire à l'aide de jQuery

Question

Je souhaite précharger toutes les images dans un répertoire appelé img, et ce répertoire contient également le sous-répertoire ui_images.

Je sais comment précharger des images spécifiques en plaçant leurs noms dans un tableau et en effectuant le travail de préchargement, mais je veux savoir comment dire au script de rechercher dynamiquement toutes les images de ce répertoire img et img/ui_images?

Voici mon code:

var preloadImg = function(imgArr){ 
    $.each(imgArr, function(index,value){ 
     $("<img/>")[0].src = value; 
    }); 
} 

var arrimg = ['img/check.png','img/add_sub.png']; 
preloadImg(arrimg); 

Answer 1

Il n'y a pas d'installation généralement disponible pour faire une liste de répertoires http. Les options que je peux penser sont:

1. Nom vos images de façon prévisible comme (Img001, img002, etc ...) et vous pouvez charger des images jusqu'à ce que vous obtenez une erreur. Nommez vos images de manière prévisible comme (img001, img002, etc ...) et puis codez dans une valeur limite numérique dans votre page Web pour combien il y en a.

2. Créez un appel ajax (sur le client et le serveur) qui vous donnera une liste de noms d'images à précharger. Demandez à votre serveur d'intégrer un tableau de noms d'images dans la page afin de savoir ce qu'il faut précharger.

Answer 2

Je cherchais à améliorer les performances sur l'un de mes sites et j'ai étudié cela. Ma solution semble fonctionner et je ne l'ai encore jamais vue ailleurs.

Son une __gVirt_NP_NN_NNPS<__ approche en deux étapes en utilisant jquery et php

1. // images préchargement via jquery .load et supprimer une fois que leur mise en cache via le rappel

   <div id="preload"></div> 
   
   $('#preload').load('preload.php', function() { 
   $('#preload').remove(); 
   }); 
   

2. // preload.php ci-dessous - faire une boucle dans le dossier image et insérer les images dans un div caché

   <div style="display:none"> 
   <?php 
   $dirf = 'images'; 
   $dir = scandir($dirf); 
   foreach ($dir as $file) { 
   if (($file != '..') && ($file != '.')) { 
       echo "<img src='images/$file' />"; 
       } 
   } 
   ?> 
   </div> 
   

Cela a fonctionné dans Firefox, mais n'hésitez pas à critiquer ou à améliorer