Preload images avec image loader et mise en cache javascript

Soyez le premier à donner votre avis sur cette source.

Vue 8 875 fois - Téléchargée 563 fois

Description

Bon voila c'est le premier script que je poste !
PHP-MySQL et JAVASCRIT
Charge les images dans le cache du client, puis il supprime
les images de chargement et les remplaces par celle de la base de donné
pour évité les affichages trop lent, sa peut être sympa.
Pour voir ce que sa donne allez ici www/nyuclick.com/s2/

Source / Exemple :


<?php
			$hostname_preload = "localhost";
			$database_preload = "preload_php";
			$username_preload = "root";
			$password_preload = "";
			$preload = mysql_pconnect($hostname_preload, $username_preload, $password_preload) or trigger_error(mysql_error(),E_USER_ERROR);  
			mysql_select_db($database_preload);

			/* Function JavaScript ****************************/
			function LoadIMG($data_img)
			{
			//Repertoire des images	
			$IMG_repertoire = './images'; // SANS LES ' / '
			//Hauteur des images
			$Hauteur_img	='150';
			//Largeur des images
			$Margeur_img	='150';
			
			//On créer la fonction JS 
			$js ='
				 function preload(){
					if(document.images){
						tabImages = new Array;
						for (var i = 0; i<preload.arguments.length; i++){
							tabImages[i] = new Image();
							tabImages[i].scr = preload.arguments[i];
						}
					}
				}
				var tabImages = new Array;
				
				preload ("images/monImage.gif","images/monImage.gif"';//Ici on met des éventuels images pour le préchargement, si il y en a...
				//preload (                                                   // Si il n'y a pas d'éventuels d'images pour le preload 
						
				if(is_array($data_img))
				{
				$qts = sizeof($data_img);
				$i = 1;
					while($i < $qts)
						foreach($data_img as $cle=>$Nimage)
					{
						{
						switch($qts)
						{
						case 1: $js .=",\" ".$IMG_repertoire."/".$Nimage. " \" "; break;
						default : $js .=",\" ".$IMG_repertoire."/".$Nimage. " \" "; $i++;
						}

					}//fin foreach
				}//fin while
			$js .=');'; //On clôture preload de JavaScript
		
			//On crée la function pour afficher les images après le cash
			$js .='function ChangeIMG(){';
				foreach($data_img as $cle=>$Nimage)
				{
		$js .='document.getElementById("'.$Nimage.'").innerHTML =\'<img src="'.$IMG_repertoire.'/'.$Nimage.'" width="'.$Hauteur_img.'" height="'.$Margeur_img.'" alt="'.$Nimage.'" /> \'; ';
				}//fin du foreach
				$js.='}';
		
		
			return $js;
			}//fin du is_array
		}//Fin function LoadIMG
		
		
		
			/* Photos */
			function photos()
			{
			//Expretion Query à changer suivant les besoins...
			$sql = mysql_query("SELECT * FROM preload ");
			$data_photo	='';
			$data_img = array();
				if(mysql_num_rows($sql)>0)
				{
					while($row = mysql_fetch_array($sql))
					{
					$data_photo .='
					  <div class="contenteProd">
						<div class="contenteIMG" id="'.$row['photo'].'"><img src="images/loader.gif" width="150" height="150" /></div>
						<div class="banIMG">'.$row['titre'].'</div>
						<div class="texteIMG">'.$row['texte'].'</div>
					  </div>';
					  
					// On ajoute les photos das le tableau au fur et a mesûre
					$data_img[] = $row['photo'];
					}//fin du while
				
				$recup = LoadIMG($data_img);
				//On retourne les données
				return $data_photo."|".$recup;
				mysql_free_result($sql);
				
				}else{//si pas de photo dans l'album on peut faire un truc comme ça et après on fait un switch
				$data_photo='0';
				$recup ="0";
				return $data_photo."|".$recup;
				}

			}	
			
			$data  		  = explode("|",photos());
			$sj_script    = $data['1'];
			$Form	      = $data['0'];
?>

/********************************************************************/
//POUR LA PAGE PHP *************************************************//
<?php include('php-preload.inc.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript" >
<?php echo $sj_script ;?>
</script>
<style type="text/css">
<!--
#contenaire {
	width: 900px;
	margin: auto;
}
#banner {
	width: 900px;
	height: 25px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 5px;
	font-family: Verdana, Geneva, sans-serif;
}
.contenteProd {
	width: 900px;
	height: 150px;
}
.contenteIMG {
	float: left;
	width: 150px;
	height: 150px;
}
.banIMG {
	float: left;
	width: 740px;
	height: 20px;
	padding-top: 5px;
	padding-left: 10px;
}
.texteIMG {
	float: left;
	width: 730px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
-->
</style>
</head>

<body onload="ChangeIMG();">
<div id="contenaire">
  <div id="banner">Préchargement des images avec images de chargement </div>
  <!--
  <div class="contenteProd">
  	<div class="contenteIMG"><img src="images/loader.gif" width="50" height="50" /></div>
    <div class="banIMG">Banner images</div>
    <div class="texteIMG">Texte sur les images</div>
  </div>
  -->
  <?php echo $Form ;?>
</div>
</body>
</html>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

> Placé dans le cas de figure comme il est proposé dans le script, il libère bien la mémoire
> (test sous Windows7 et LINUX), en revanche placé après une conditionnel, je précise:

PHP libere la memoire et les ressources a la sortie du script, mais ton mysql_free_result() n'est toujours pas appele...

Tu peux l'executer en pas a pas avec un debugger si tu veux vraiment en etre sur.
Messages postés
8
Date d'inscription
dimanche 30 novembre 2008
Statut
Membre
Dernière intervention
3 août 2009

je tiens à informer d'un commentaire qui à été fait plus haut au sujet du MYSQL_FREE_RESULT(); placé après un RETURN :
C'est une constatation...
Placé dans le cas de figure comme il est proposé dans le script, il libère bien la mémoire(test sous Windows7 et LINUX), en revanche placé après une conditionnel, je précise:
/********************************/
if(condition){
//instrunction
return ......
}else{
//instruction
return....
}
mysql_free_result($query);
/********************************/
Là j'ai put constater qu'il ne servait à rien .... Je suis loin d'avoir la réponse pour l'instant, mais vous, vous l'avez ? :-)
Messages postés
8
Date d'inscription
dimanche 30 novembre 2008
Statut
Membre
Dernière intervention
3 août 2009

Pardon pour le lien je le remet ici -> http://nyuclick.com/s2/
Messages postés
6
Date d'inscription
vendredi 20 avril 2007
Statut
Membre
Dernière intervention
28 septembre 2007

Mitch,
J'aurais bien voulu aller voir ce que ça donne avant tout mais ton lien www/nyuclick.com/s2/ ne fonctionne pas, même en remplaçant / par un point ... :S
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

>Vous me parlez bien du PHP ou j'ai un "switch tout moche ?" En fait mon problème et donc
>pourquoi j'en suis arrivé là, c'est la virgule(,) qui se place à chaque fois après qu'on
>rajoute l'image pour le JavaScript. Si je fait une boucle, comment je fais dans la boucle
>quand j'arrive à la dernière image pour ne pas placé la virgule(,) si nom une fois fois
>le script sur la page, le javascript sort inévitablement une erreur.

Ton switch est caduque car tu as un seul cas particulier, si $qts 1, et dans ce cas, tu ne rentres jamais dans ton while (1<1 false).

Sinon tu peux t'en sortir avec la fonction php implode pour mettre des virgules entre les elements de ton tableau...

De plus j'ai l'impression que tu ajoutes plusieurs fois chaque image... (le while est inutile puisque tu as un foreach (inutile lui aussi si tu utilises implode))
Afficher les 15 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.