Forum d'entraide PHPFrance

Bonjour à tous,

j'ai code php/ajax/javascript qui affiche des véhicule sur un écran de télé et j'ai deux problème:

- Les image défile super vite et je n'arrive a savoir pourquoi:
- J'ai Firefox qui sature au niveau de la ram (exemple j'ai laisser le programme tourner j'ai 600Mo de ram utilisé)

<?php
header('Content-Type: text/html; charset=ISO-8859-15'); 
$server="127.0.0.1";
$user="**";
$pass="***";
$db="pl***t*";
mysql_connect($server,$user,$pass) or die('erreur de connexion');
mysql_select_db($db) or die ('impossible de se connecter a la base');
//echo $_POST["idauteur"];

$query = mysql_query("SELECT 
Marque, SUBSTRING(Modele,1,20) as Modele, Famille, SUBSTRING(Version,1,20) as Version, EnergieLibelle, Kilometrage, BoiteLibelle, CONCAT(LEFT(Date1Mec, 2),'/',substr(Date1Mec,4,2),'/', RIGHT(Date1Mec,4)) as Date1Mec  , Annee, Couleur,PuissanceFiscale,Couleur, PrixVenteTTC, EquipementsSerieEtOption, Photos
FROM `table 1` WHERE Photos <>'' AND CodePvo='".trim($_POST["idauteur"])."' ORDER BY RAND() LIMIT 1");

$query2 = mysql_fetch_array($query);

?>
<div id="haut">
<span style="font-size: 70px; font: bold;">NOTRE SELECTION <br/> DE VEHICULE D'OCCASION</span><br/>
</div>
<img src="img/logo+marque.png" alt="logo" id="logo"/>
<div id="corp">
</div>
<br/>
<div id="conteneur">


 

 <?php
//ensuite pour parcourir ton tableau :
 
$tab_string = explode("|", $query2["Photos"]);
 
//ensuite pour parcourir ton tableau :

echo '<script type="text/javascript">
function randomImg(){
   var tabImg = new Array();';

 
for($i = 0; $i <count($tab_string); $i++){
echo 'tabImg['.$i.']  = "'.$tab_string[$i].'";';

//echo '<img src="photos/'.$tab_string[$i].'" alt="img" style="width:25%;" />';
}
   echo "document.getElementById('image').src += tabImg[Math.round(Math.random()*4)];
}
</script>";

 $tab_string2 = explode("|", $query2["Photos"]);
 
//ensuite pour parcourir ton tableau :


echo '<div id="image">
<div id="slideshow">';
 
for($i = 0; $i <count($tab_string2); $i++){
echo '<div><img src="photos/'.$tab_string2[$i].'" alt=""  class="coin"/></div>';


}
echo '</div></div> ';



   //<img src="photos/" id="image" style="width:25%" class="coin"/>
echo '<table id="enteteagenda"><tr><td><span style="font-weight:bold ;">'.$query2["Marque"].' '.$query2["Famille"].' </span></td><td style="text-align:right;"><span class="bleu" >'.$query2["PrixVenteTTC"].' &#x20AC;</span>	</td></tr>';
 echo '<tr><td>'.$query2["Version"].'</td></tr></table>';  
echo ' <table id="tableagenda"  cellspacing="0" cellpadding="0" border="0">';

echo '	<tr><th>INFORMATIONS GENERALES</th></tr><tr>
		<td>ANNEE: '.$query2["Annee"].'</td></tr>
		<tr><td>KILOMETRAGE: '.$query2["Kilometrage"].'KM </td></tr>
		<tr><td>PUISSANCE FISCALE: '.$query2["PuissanceFiscale"].' CV</td></tr>
		<tr><td>BOITE DE VITESSE: '.$query2["BoiteLibelle"].' 	</td></tr>
		<tr><td>ENERGIE: '.$query2["EnergieLibelle"].' 	</td></tr>
		<tr><td>MISE EN CIRCULATION: '.$query2["Date1Mec"].' 	</td></tr>
		<tr><td>COULEUR EXTERIEUR: '.$query2["Couleur"].' 	</td></tr>
		<tr><td>COULEUR INTERIEUR: '.$query2["Couleur"].' 	</td></tr>
		
		
		
		</table>';
///

 
echo '<table id="tableagenda2"><tr><th colspan="2">OPTIONS ET EQUIPEMENT</th></tr>';
$nbCols = 2; // nombre de colonnes du tableau
$cpt = 0; // compteur d'éléments
$tab_string = explode("|", $query2["EquipementsSerieEtOption"]);
for($i = 0; $i <18; $i++){
    if ($cpt%$nbCols==0) // on divise le nb d'élément par le nb de colonnes. Si le reste est de 0 ...
        echo '<tr>'; // ..., alors on est sur le premier élément d'une ligne


    // On place chaque élément dans une cellule du tableau
    echo '<td>';
    if(isset($tab_string[$i])) 
	{
    echo $tab_string[$i]; // affichage de tout ce qu'on veut dans la cellule
	}
	else
	{
	echo'-';
	} // affichage de tout ce qu'on veut dans la cellule
    echo '</td>';


    // fin d'une ligne
    if ($cpt%$nbCols==($nbCols-1)) // on divise le nb d'élément par le nb de colonnes. Si le reste est de ($nbCols-1) ...
        echo '</tr>'; // ..., on est sur le dernier élément d'une ligne

    $cpt++; // on incrémente le compteur pour savoir où on en est

}

if ($cpt!=0 && $cpt%$nbCols!=0) { // S'il n'y a pas eu assez de cellules dans la boucle pour finir la ligne ...
    echo '<td colspan="'.($nbCols - ($cpt%$nbCols) ).'">&nbsp;</td>'; // ... on complète avec une cellule vide de la bonne taille...
    echo '</tr>'; // ... et on ferme la ligne
}

echo '</table>';


/////
 







		

 
 
 

 
		?>
		
		
   </div>
<div id="footer"></div>
<link rel="stylesheet" type="text/css" href="css/site.css" media="screen" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
       
    <script type="text/javascript">  
       $(function(){  
          setInterval(function(){  
             $(".slideshow ul").animate({marginLeft:-350},800,function(){  
                $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));  
             })  
          }, 10000);  
       });  
	   
	   $("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  10000);
    </script> 
</body>
</html>

Pourriez-vous m'indiquer mon erreur

merci d'avance pour votre aide

guigui69

Quid de la taille des dites images ?
Et pour le défilement je n'ai pas vu de couac dans le code JS, cela ne viendrait pas du fait que le slideshow est lancé alors que les images ne sont pas encore toutes chargées ?
Et donc à chaque chargement d'image cela décale le DOM vu que l'icône d'image non chargée est plus petite que l'image elle même.

Bonjour,

les image 800*600

par contre je n'ai pas compris:

Et pour le défilement je n'ai pas vu de couac dans le code JS, cela ne viendrait pas du fait que le slideshow est lancé alors que les images ne sont pas encore toutes chargées ?
Et donc à chaque chargement d'image cela décale le DOM vu que l'icône d'image non chargée est plus petite que l'image elle même.

En gros quand une image n'est pas encore chargée cela donne un petit carré de disons 30x30 pixels sur la page.
Une fois l'image chargée le carré devient donc de la taille de l'image.
Ce qui pourrait produire un effet accordéon et donc ce que tu sembles voir.

Par contre j'ai trouvé un autre souci :
[javascript]setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 10000);[/javascript]
Tu utilises appendTo mais jamais tu ne supprimes le node original. (je suppose que le but est de prendre la dernière image puis de la mettre en première place)
Donc tu rajoutes des éléments à l'infini en les dupliquant ce qui forcement te fait monter la mémoire.

Bonjour ,

merci pour ton explication.

Que me conseilles-tu de faire?

Mon but c'est que mes images s'affiche correctement et que le changement des image soit pas si brutal.

guigui69

Je ne suis pas un grand manipulateur du DOM.
Mais le script que tu tentes de mettre au point n'a rien de nouveau, il en existe plein avec jQuery.
Regardes le code source de certains pour t'en inspirer.