par
Herve_be » 09 oct. 2021, 14:52
Bonjour,
Une de mes pages est un album photo : en php il va chercher les 750 images d'un répertoire et les classe par date (données Exif) avant de les afficher en miniature.
Problème : si on clique sur une image avant qu'elles soient toutes chargées, ce qui prend environ 30 secondes, cette image est affichée en grand dans la même fenêtre; quand on la quitte il revient à la fenêtre précédente et ... recharge les images !
Voici l'essentiel du code
<head>
<script type="text/javascript" language="javascript" src="../../lytebox.js"></script>
<link rel="stylesheet" href="../../lytebox.css" type="text/css" media="screen" >
</head>
<?php
$localURL = 'Temp.jpeg';
$dir = opendir("Photos");
while($file = readdir($dir))
{
if(substr($file,-3)=="jpg")
{
copy("Photos/".$file, $localURL);
$exif_data = @exif_read_data($localURL,0,true);
$Date=$exif_data['EXIF']['DateTimeDigitized'];
$Date=substr($Date,8,2)."/".substr($Date,5,2)."/".substr($Date,0,4);
$Time=mktime(0,0,0,(int)substr($Date,3,2),(int)substr($Date,0,2),(int)substr($Date,-4));
$Delta=floor(time()/24/60/60)-floor($Time/24/60/60); //Différence en jours entre aujourd'hui et date fichier
$Delta=str_pad($Delta, 5, "0", STR_PAD_LEFT);
$dat[] = $Delta.str_pad(substr($file,0,strlen($file)-4), 3, "0", STR_PAD_LEFT).$Date; // DDDDDfffYYYY/MM/DD
}
}
sort($dat); //Tri selon la date décroissante (âge croissant) et nom de fichier croissant
foreach($dat as $elem)
{ // je vous passe la mise en page sous forme de tableau
Echo "<a href='Photos/".$File.".jpg' rel='lyteshow[PPAlbum]'><img src='Photos/".$File.".jpg' width='120'></a>";
}
lytebox.js est un script qui permet d'afficher chaque image dans une "boîte" munie de flèches pour les faire défiler.
Pour accélérer l'affichage, est-il possible de charger les images en miniature ou en faible résolution et de ne pas charger l'image complète avant qu'on clique dessus ?
Autres suggestions pour accélérer le chargement sont bienvenues.
Merci d'avance pour votre aide
Bonjour,
Une de mes pages est un album photo : en php il va chercher les 750 images d'un répertoire et les classe par date (données Exif) avant de les afficher en miniature.
Problème : si on clique sur une image avant qu'elles soient toutes chargées, ce qui prend environ 30 secondes, cette image est affichée en grand dans la même fenêtre; quand on la quitte il revient à la fenêtre précédente et ... recharge les images !
Voici l'essentiel du code
[PHP]<head>
<script type="text/javascript" language="javascript" src="../../lytebox.js"></script>
<link rel="stylesheet" href="../../lytebox.css" type="text/css" media="screen" >
</head>
<?php
$localURL = 'Temp.jpeg';
$dir = opendir("Photos");
while($file = readdir($dir))
{
if(substr($file,-3)=="jpg")
{
copy("Photos/".$file, $localURL);
$exif_data = @exif_read_data($localURL,0,true);
$Date=$exif_data['EXIF']['DateTimeDigitized'];
$Date=substr($Date,8,2)."/".substr($Date,5,2)."/".substr($Date,0,4);
$Time=mktime(0,0,0,(int)substr($Date,3,2),(int)substr($Date,0,2),(int)substr($Date,-4));
$Delta=floor(time()/24/60/60)-floor($Time/24/60/60); //Différence en jours entre aujourd'hui et date fichier
$Delta=str_pad($Delta, 5, "0", STR_PAD_LEFT);
$dat[] = $Delta.str_pad(substr($file,0,strlen($file)-4), 3, "0", STR_PAD_LEFT).$Date; // DDDDDfffYYYY/MM/DD
}
}
sort($dat); //Tri selon la date décroissante (âge croissant) et nom de fichier croissant
foreach($dat as $elem)
{ // je vous passe la mise en page sous forme de tableau
Echo "<a href='Photos/".$File.".jpg' rel='lyteshow[PPAlbum]'><img src='Photos/".$File.".jpg' width='120'></a>";
}[/PHP]
lytebox.js est un script qui permet d'afficher chaque image dans une "boîte" munie de flèches pour les faire défiler.
Pour accélérer l'affichage, est-il possible de charger les images en miniature ou en faible résolution et de ne pas charger l'image complète avant qu'on clique dessus ?
Autres suggestions pour accélérer le chargement sont bienvenues.
Merci d'avance pour votre aide
