CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 27 18:08:35

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Divers

> PRELOAD IMAGES AVEC IMAGE LOADER ET MISE EN CACHE JAVASCRIPT

PRELOAD IMAGES AVEC IMAGE LOADER ET MISE EN CACHE JAVASCRIPT

Information sur la source

Note :

5,00 / 10

Catégorie :Divers Classé sous :preload, image, php, mysql, cache Niveau :Initié Date de création :27/07/2009 Date de mise à jour :27/07/2009 08:50:03 Vu / téléchargé :6 349 / 374

Auteur : mitchlmx

Ecrire un message privé

Site perso

Commentaire sur cette source (15)

Ajouter un commentaire et/ou une note

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

<?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>

<?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>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

index.php 1 442 octets
php-preload.inc.php 3 261 octets
preload_php.sql 1 308 octets
images
- images1.jpg 6 753 octets
- images2.jpg 20 390 octets
- images3.jpg 7 308 octets
- images4.jpg 6 305 octets
- images5.jpg 7 055 octets
- images6.jpg 6 640 octets
- loader.gif 36 760 octets

Télécharger le zip

Historique

27 juillet 2009 08:50:03 :: J'avais oublié la source...

Sources de la même categorie

MODULE JOOMLA 1.5 NOW LISTENING par Alcantornet

UPLOAD CENTER par basssem81

COMPTEUR DE CLIQUE PHP AVEC JQUERY par devgoneti

LIVRE D'OR SIMPLE (POUR DÉBUTANT) par devgoneti

SCRIPT TRAVAUX POUR VOTRE SITE par FleuryK

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

REDIMENSIONNEMENT D'IMAGE PHP par JStevens

EL COYOTOS LIVRE D'OR PHP 5 par elcoyotos

CLASS MYSQL 5/PHP5 AVEC GESTION DES EXCEPTION ET DES REQUÊTE... par devil_may_cry

PAGINATION JAVASCRIPT PHP MYSQL par cod57

GESTION DE SCOLARITÉ [PHP] ET [MYSQL] par ayoubshadow

Commentaires et avis

Commentaire de mitchlmx le 27/07/2009 08:51:59

SI vous voulez améliorez le script !

Commentaire de lanner le 28/07/2009 10:17:37

Salut

Je pense que la première opération serait de corriger toutes les fautes d'orthographes, explicatif et contenu , car il y en a beaucoup trop et cela ne fait pas sérieux ;)

Commentaire de mitchlmx le 28/07/2009 10:39:54

Oui c'est une tare pour moi, je pensé les enlevés mais j'ai pris le risque de quelques réflexions...Cela dit, j'espère ce pendant pourvoir rendre service. Toute fois si c'est le script qui vous intéresses, il est plus soigneux que corriger les erreur de syntaxe...
Amicalement M.
PS: Votre avis sur ce script m'intéresse aussi :-)

Commentaire de faiblard le 30/07/2009 15:10:01

En regardant en diagonal...

$Margeur_img ='150';
$Largeur_img plutôt nan?

for (var i = 0; i<preload.arguments.length; i++){
On sort le length de la boucle...

# //On retourne les donnÃ©es
# return $data_photo."|".$recup;
# mysql_free_result($sql);
==> une fois arrivé a ton retourne la fonction fera pas ce qu'il y a en dessous...

Et en cherchant il reste encore énormément de choses a améliorer...

A mon avis c'est pas une source de niveau initié...

Commentaire de mitchlmx le 31/07/2009 20:55:41

Bien bien, c'est ce que je voulait des critiques !! Je suis loin d'être parfait, mes script aussi.. Je touche que depuis quelque moi à php et pour dire vrais vous m'aidai à progresser. J'ai rectifier le "mysql_free_result()", pour la boucle, j'y avais déjà pensé ! Mais si procède comme sa et que la DB est vide? et oui faut y pensé !!.... Aidé moi à amélioré merci d'avance...

Commentaire de kankrelune le 02/08/2009 15:47:59

"for (var i = 0; i<preload.arguments.length; i++){
On sort le length de la boucle..."

C'est valable en php mais là c'est du Js... .. .

@ tchaOo°

Commentaire de faiblard le 03/08/2009 08:51:32

Cela ne change pas grand chose il me semble, non?

Il calcule tout de même chaque fois length, et cela sera toujours plus propre de sortir le length de la boucle... Si je me trompe dis moi où :)

Commentaire de mitchlmx le 03/08/2009 09:24:44

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.
/*******/
Dans PHP :
preload ("images/monImage.gif" -->,<-- ++Images.... et pour la dernière images pas de virgule.
/******/
Je pense bien que ma boucle JS est bonne non ?
Une astuce ? mise à par un " switch tout moche :-)"

Commentaire de hornetbzz le 03/08/2009 10:23:56 5/10

Salut,

Effectivement l'orthographe n'est pas ton fort, mais ça, c'est de la forme, donc pardonnable en regard de l'intention louable, et du partage de ton travail. Donc merci pour ça.

Pour le fond, au delà des remarques précédentes que je partage, penses peux-être à :

- taille des images: pas très flexible tt ça entre la dB, le css et le js.
Que se passe-t-il si ça ne matche pas entre tes images 150x150 de la dB et celles que tu affiches..? En définitive, tel que c'est codé, il n'y a pas d'autre choix que la taille 150x150 (Query dans la dB: <img src="images/loader.....) à rapprocher du ...
document.getElementById("'.$Nimage.'").innerHTML =..., sans oublier le css...)

- tester si js est actif dans le navigateur du client, (ajouter une <noscript>)

- rendre le code js exécutable au moins pour les 2 navigateurs qui représentent à eux seuls 85% du marché, à savoir FF et IE. (Je ne suis pas certain, mais il me semble me rappeler qu'il faut adapter le "document.getElementById" selon le type de browser)

- Sécurité des forms: je n'ai rien vu sur le sujet, mais bon , j'ai lu en diagonal,

- Structure: pas très modulaire tout ça, ça ressemble plus à un code propriétaire, donc difficilement intégrable ne l'état sur un site existant. Une fois les fonctions fonctionnelles et testées , ça vaudrait pê le coup de recoder plus proprement.

Bref, ça montre juste qu'il y a du boulot avant de pouvoir vraiment partager un code utilisable.

Bon courage

Commentaire de mitchlmx le 03/08/2009 10:49:45

Bon, il ne me reste plus qu'à revoir tout sa de plus près, effectivement j'avais fais ce bout de code pour dépanné un ami, mais d'après les commentaires sa ressemble plutôt à un cadeau empoisonné :-(
Pour l'adaptation JS et la compatibilité je vais encoder JQuery.
Pour le CSS je vais y cogitez calmement.
Merci pour ses remarques constructives.
Je vais donc tentez de vous surprendre...@++

Commentaire de LeFauve42 le 03/08/2009 11:36:25

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

Commentaire de philou04 le 03/08/2009 14:06:25

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

Commentaire de mitchlmx le 03/08/2009 14:22:53

Pardon pour le lien je le remet ici -> http://nyuclick.com/s2/

Commentaire de mitchlmx le 03/08/2009 15:01:26

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

Commentaire de LeFauve42 le 04/08/2009 10:12:09

> 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.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

image php Mysql [ par arnaldo21 ] bonjour pourriez-vous me donner un exemple concret d'affichage d'image a partir d'une bdd. J'utilise un upload qui stock le nom de l'image dans la bdd php/mysql et album photo sécurisé [ par pumbaa ]  Salut!!   Jai crée un album dimage avec php/MySQL. Les images ce trouvent Php - MySql + Images [ par 68_abis ] Bonjour à tous,Peut-être cette question à e-t-elle été déjà posée, mais je n'en ai pas trouvée de traces, javascript / html ===>PHP [ par boob3 ] Bonjour !J'ai un petit soucis de passage d'un code classique en php, pour l'affichage des images d'une base de donnéeCe code permet de faire passer un formulaire php et image [ par mumbly_58 ] Bonjour,J'ai un formulaire .php + MySQL qui permet d'inscrire une application, sa catégorie, son auteur, sa date de sortie, etc. ... bref un peu une s Longueur de caractere dans un textarea [ par DjChat ] Bonjour a tous, j'ai un formulaire avec deux textarea et j'aimerai limiter le nombre de caractere a taper dans ces champ, j'me suis renseigner et c'es Image / MySQL / php [ par hazkaal ] Bonjour !Je bosse sur un site et j'ai un probleme au niveau de laffichage d'images...Je m'explique :L'utilisateur upload une image. Cette image est st apeller du html stocke dans mysql avec du php flah et image [ par fantomas3800 ] Bonjour bonjour,grande debutante en php, j essaye de creer un site .. et ca y est je butte encore .... Si qq un peu me donner un coup de main ca serai galerie photo avec php [ par stophking ] bonjour : je suis entrain de créer une galerie photo avec php/mysql et j'aimeria bien que vous me corriger le code si il ya des fautes, et une chose q Probleme upload image dans mysql [ par vetcho2paname ] bonjour a tous je travail sur un projet personnel et je suis bloqué sur un problème. j ai creer un formulaire qui permet a un users de telecharger u

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : REMPLIR UN TABLEAU à PARTIR DE LA FIN par Jeromedu79

RE : MYSQL_FETCH_ASSOC par moumenxavi

RE : MYSQL_FETCH_ASSOC par inwebo

RE : REMPLIR UN TABLEAU à PARTIR DE LA FIN par inwebo

RE : CHANGER LE CONTENU D'UNE PAGE WEB EN PHP EN CLIQUAN SUR UN BOUTON (J'AI BESOIN D'AIDE) par inwebo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP