Lister images d'un répertoire, mais pas tout d'un coup

06 févr. 2019, 00:27

Helloooooo

Voilà, j’ai une petite colle .

Aujourd'hui , dans la partie admin d'un site, j'affiche toute les images d'un répertoire (pochettes de disques).
Ca me permet de voir si il y en a une à retailler.

Code : Tout sélectionner

$dossier="../../img/covers/";
$dont_list = array(".", "..", ".htaccess", "nocover.gif", " blank.gif", "contrib", "contribcovers", "temp", "original")	;

chdir($dossier);
array_multisort(array_map('filemtime', ($files = glob("*.*"))), SORT_DESC, $files);

echo "<table width='100%' border='0' cellspacing='5' cellpadding='0' >
<tr><td>";
foreach ($files as $file) {  
 if(!in_array($file, $dont_list)) {
	 $id = substr($file, 0, -4);
	 	 ?>
<a href="./?checksent=1&id_actuel=<? echo $id; ?>" target="_new"><img src="<? echo $dossier.$file; ?>" id="<? echo $id; ?>" width="250" height="250"></a>

<?
}
}

Le problème c'est qu'aujourd'hui, il a y a plus de 3000 pochettes et ca représente 50 Mo, donc gloups le temps de chargement de la page.

Je voudrais , dans l'idéal, faire comme on voit sur pas mal de sites de news, un chargement par bloc de par exemple 50 images, au fur et à mesure qu'un descend dans la page.

Mais par contre je n’ai aucune idée de comment peut s'appeler ce genre de fonction

Si quelqu'un a une idée

Merci

Couin

06 févr. 2019, 01:28

Bonjour,

Ça s'appelle du lazy-loading et ça se fait en javascript.
Il y a pas mal de tuto sur le sujet et de librairies JS qui permettent de faire cela en quelques lignes de code :
https://www.google.com/search?q=lazy-loading
https://www.google.com/search?q=jquery+lazy-loading

06 févr. 2019, 01:41

Hello

Je vais checker les liens que tu m'as passé

Entre temps, j'ai trouvé une bidouille inspiré d'un script sur "infinite scroll", consistant à mettre les premières (50 par exemple) images dans un div et ensuite d'appeler une autre page listant les 50 images suivante quand on arrive en bas de page :

Dans la page initiale , et dans son head :

Code : Tout sélectionner

   <!-- JQuery CDN -->
    <script src="jquery-3.3.1.min.js"></script>

    <!-- Inview Js (jquery.inview.js) -->
    <script src="jquery.inview.js"></script>

    <style>
        #response div{

        }
        #loader{
            display: block;
            margin: auto;
        }
    </style>

puis le div et l'appel des images suivantes :

Code : Tout sélectionner

 <div id="response">
 <?
$i = 0;
foreach ($files as $file) {  
 if(!in_array($file, $dont_list)) {
	 
	 $i++;
	 if ( $i > 100 ) { break; }
	 if ( $i >= 1) {
	 $id = substr($file, 0, -4);
	 	 ?>
<a href="./?checksent=1&id_actuel=<? echo $id; ?>" target="_new"><img src="<? echo $dossier.$file; ?>" id="<? echo $id; ?>" width="250" height="250"></a>

<?
}
}
}
?> 
</div>
<div id="loader" style="display:inline"></div>
<input type="hidden" id="pageno" value="1">
     <script>
         $(document).ready(function(){
             $('#loader').on('inview', function(event, isInView) {
                 if (isInView) {
                     var nextPage = parseInt($('#pageno').val())+1;
                     $.ajax({
                         type: 'POST',
                         url: 'mosaicscroll.php',
                         data: { pageno: nextPage },
                         success: function(data){
                             if(data != ''){							 
                                 $('#response').append(data);
                                 $('#pageno').val(nextPage);
                             } else {								 
                                 $("#loader").hide();
                             }
                         }
                     });
                 }
             });
         });
     </script>

Et la page "mosaicscroll.php :

Code : Tout sélectionner

<? 
$dossier="../../img/covers/";
$dont_list = array(".", "..", ".htaccess", "nocover.gif", " blank.gif", "contrib", "contribcovers", "temp", "original")	;

chdir($dossier);
array_multisort(array_map('filemtime', ($files = glob("*.*"))), SORT_DESC, $files);
    $pageno = $_POST['pageno'];

    $no_of_records_per_page = 100;
    $offset = ($pageno-1) * $no_of_records_per_page;
    $stop = $offset + $no_of_records_per_page;
	
$i = 0;
foreach ($files as $file) {  
 if(!in_array($file, $dont_list)) {
	 
	 $i++;
	 
	 if ( $i > $stop ) { break; }
	 if ( $i > $offset ) {
	 
	 $id = substr($file, 0, -4);
	 	 ?>
<a href="./?checksent=1&id_actuel=<? echo $id; ?>" target="_new"><img src="<? echo $dossier.$file; ?>" id="<? echo $id; ?>" width="250" height="250"></a>

<?
}
}
} 
?>

Ca marche mais j'aimerais (pas difficile le mec mdr ) que l'appel des images suivantes se fasse avant d'arriver en bas de page (comem ca moins de latence).
J'ai tenté d'inserer dnas la page initiale :

Code : Tout sélectionner

if ( $i == 80 ) { echo '<div id="loader" style="display:inline"></div>'; }

et dans mosaicscroll.php

Code : Tout sélectionner

if ( $i == ($offset+80) ) { echo '<div id="loader" style="display:inline"></div>'; }

Mais cela ne marche qu'une fois (après les autres images ne sont pas appelées.

A suivre donc, peut etre la réponse dans les liens

06 févr. 2019, 01:45

Démo du 1er lien avec Jquery qui devrait correspondre à ce que tu recherches :
http://jquery.eisbehr.de/lazy/example_basic-usage

06 févr. 2019, 02:29

Reu ,

Effectivement, ca a l'air de bien correspondre.
J'ai du coup, fait une page de test en adaptant mais je pense que le script perd les pédales car il y a trop d'images et ca peine à charger et ca freeze le navigateur

Je te passe le lien du test en MP si tu veux voir le résultat.

Je vais continuer de fouiner

Lister images d'un répertoire, mais pas tout d'un coup

Qui est en ligne