Preload images avec image loader et mise en cache javascript

Télécharger le projet
Commenter

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>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.