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 :)

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

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] <!-- 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>[/code]
puis le div et l'appel des images suivantes :
[code] <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>[/code]

Et la page "mosaicscroll.php :
[code]<?
$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>

<?
}
}
}
?>[/code]

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]if ( $i == 80 ) { echo '<div id="loader" style="display:inline"></div>'; }[/code]
et dans mosaicscroll.php
[code]if ( $i == ($offset+80) ) { echo '<div id="loader" style="display:inline"></div>'; }[/code]

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 :)

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

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]$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>

<?
}
}[/code]

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