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

Ce site au démarrage

begin process at 2012 05 28 13:55:24

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

MISE EN CACHE D'IMAGES AUTO [AJAX]

Information sur la source

Note :
Aucune note

Catégorie :Trucs & Astuces Classé sous :image, cache, ajax, précharger, auto Niveau :Initié Date de création :03/06/2011 Date de mise à jour :04/06/2011 11:04:04 Vu / téléchargé :2 735 / 176

Auteur : Allan007

Ecrire un message privé

Site perso

Commentaire sur cette source (0)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Cette source permet de lister les fichiers images des répertoires pour ensuite les précharger automatiquement au navigateur en ajax.

Source commenté utilisant le Framework jQuery et JSON.

J'ai décidé de vous poster cette petite source que j'ai faite pour mon site internet, car il me semble ne pas y avoir de source similaire donc ça peut vous servir j'espère ;-)

Fini d'écrire en dur le préchargement image par image, maintenant c'est automatique ! :-)
Simple source mais efficace !

Source

Fichier: imgDir.php
<?php
// ######################################################
// ########## Lecture des répertoires pour la ##########
// ########## mise en cache des images s'y ##########
// ########## trouvant automatiquement, plus ##########
// ########## besoin d'écrire en dur (image ##########
// ########## par image dans vos fichier JS)! ##########
// ########## ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ##########
// ########## ~~~~~~~~~~~~~ By ~~~~~~~~~~~~~ ##########
// ########## ~~~~~~~~~~ G.Allan ~~~~~~~~~~~ ##########
// ########## ~~~~~ AGProjet@GMail.com ~~~~~ ##########
// ########## ~~~~~~~~~ www.MySW.fr ~~~~~~~~ ##########
// ########## ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ##########
// ######################################################
// Si la requête est bien la mise en cache des images
if ($_GET['action'] == 'cacheJSImg') {
// Création de l'entête
header("Content-Type: text/plain ; charset=utf-8");
// anti Cache pour HTTP/1.1
header("Cache-Control: no-cache , private");
// anti Cache pour HTTP/1.0
header("Pragma: no-cache");
// ######################################################
// ########## Initialisation des variables ##########
// ######################################################
$dirname = './images/'; // Chemin d'accès (répertoire) des images pour PHP
$dirJS = 'images/'; // Chemin d'accès (répertoire) des images pour la fonction $.preload() de JS
$dir = opendir($dirname); // Raccourci d'opendir
$i = 0; // Initialisation de la boucle à 0
// ######################################################
// ########## Parcourir le répertoire à la ##########
// ########## Recherche d'images ##########
// ######################################################
while($file = readdir($dir)) { // Simple boucle
if($file != '.' && $file != '..' && !is_dir($dirname.$file)) { // Selectionne les fichiers "valide"
if (substr($file, -3) == "gif") { // Si image GIF
$tblImages['gif'][] = substr($file, 0, -4); // Ajoute au tableau l'image GIF en question
}
elseif (substr($file, -3) == "jpg") { // Si image JPG
$tblImages['jpg'][] = substr($file, 0, -4); // Ajoute au tableau l'image JPG en question
}
elseif (substr($file, -3) == "png") { // Si image PNG
$tblImages['png'][] = substr($file, 0, -4); // Ajoute au tableau l'image PNG en question
}
$i++;
}
}
closedir($dir); // Fermeture du dossier
$tblImages['dirName'] = $dirJS; // Ajoute le répertoire spécifique a JS des images du tableau
$tabeau['dir01'] = $tblImages; // Initialisation du tableau pour le premier répertoire
// Vidage du tableau d'images pour le prochaîn répertoire
$tblImages['gif'] = "";
$tblImages['jpg'] = "";
$tblImages['png'] = "";
// La même chose qu'au dessus !
$dirname = './imgLayoute/';
$dirJS = 'imgLayoute/';
$dir = opendir($dirname);
$i = 0;
while($file = readdir($dir)) {
if($file != '.' && $file != '..' && !is_dir($dirname.$file)) {
if (substr($file, -3) == "gif") {
$tblImages['gif'][] = substr($file, 0, -4);
}
elseif (substr($file, -3) == "jpg") {
$tblImages['jpg'][] = substr($file, 0, -4);
}
elseif (substr($file, -3) == "png") {
$tblImages['png'][] = substr($file, 0, -4);
}
$i++;
}
}
closedir($dir);
$tblImages['dirName'] = $dirJS;
$tabeau['dir02'] = $tblImages;
// Préparation à la conversion des résultats
$tblResult = array('resultats'=>$tabeau);
// Conversion des résultats en JSON
$resultat = json_encode($tblResult);
// Envoye du résultat
echo $resultat ;
} else {
echo 'Erreur: Requête inconnue.';
}
?>
Fichier: index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="language" content="fr" />
<title>[MySW.fr] - Mise en cache d'images</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.preload-min.js"></script>
<script type="text/javascript">
// Au chargement de la page dès que JQuery est chargé
$(document).ready(function() {
$("#imgLoad").css("display", "none");
// Envoie une requête ajax de type get pour récupérer les images listées à mettre en cache
$.ajax({
type: "GET",
url: "imgDir.php",
data: "action=cacheJSImg",
success: function(result){
// Réponse au format JSON
reponseJson = $.parseJSON(result);
dir01 = reponseJson.resultats.dir01; // Répertoire des images 01 (ex: dossier01/)
dir02 = reponseJson.resultats.dir02; // Répertoire des images 02 (ex: dossier02/)
// S'il y a des images GIF à charger dans ce répertoire
if (dir01.gif) {
listFileType = dir01.gif; // Variable pas indispensable mais plus pratique
i = 0; // Initialisation de la boucle a 0
$.each(listFileType, function(i) {
// Mise en cache l'image avec la librairie preload de jquery
$.preload( [ $(listFileType).get()[i] ], {
base:dir01.dirName,
ext:'.gif'
});
i++; // Incrémente la boucle
});
}
// S'il y a des images JPG à charger dans ce répertoire
if (dir01.jpg) {
listFileType = dir01.jpg;
i = 0;
$.each(listFileType, function(i) {
$.preload( [ $(listFileType).get()[i] ], {
base:dir01.dirName,
ext:'.jpg'
});
i++;
});
}
if (dir01.png) {
listFileType = dir01.png;
i = 0;
$.each(listFileType, function(i) {
$.preload( [ $(listFileType).get()[i] ], {
base:dir01.dirName,
ext:'.png'
});
i++;
});
}
if (dir02.gif) {
listFileType = dir02.gif;
i = 0;
$.each(listFileType, function(i) {
$.preload( [ $(listFileType).get()[i] ], {
base:dir02.dirName,
ext:'.gif'
});
i++;
});
}
if (dir02.jpg) {
listFileType = dir02.jpg;
i = 0;
$.each(listFileType, function(i) {
$.preload( [ $(listFileType).get()[i] ], {
base:dir02.dirName,
ext:'.jpg'
});
i++;
});
}
if (dir02.png) {
listFileType = dir02.png;
i = 0;
$.each(listFileType, function(i) {
$.preload( [ $(listFileType).get()[i] ], {
base:dir02.dirName,
ext:'.png'
});
i++;
});
}
$("#imgLoad").css("display", "block");
}
});
});
</script>
</head>
<body>
<div id="imgLoad">Les images ont bien été mises en cache !<br /><i>By G.Allan [<a href="http://www.mysw.fr">MySW.fr</a>]</i></div>
</body>
</html>

Fichier: imgDir.php

<?php
//	######################################################
//	##########	Lecture des répertoires pour la	##########
//	##########	mise en cache des images s'y	##########
//	##########	trouvant automatiquement, plus	##########
//	##########	besoin d'écrire en dur (image	##########
//	##########	par image dans vos fichier JS)!	##########
//	##########	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	##########
//	##########	~~~~~~~~~~~~~ By ~~~~~~~~~~~~~	##########
//	##########	~~~~~~~~~~ G.Allan ~~~~~~~~~~~	##########
//	##########	~~~~~ AGProjet@GMail.com ~~~~~	##########
//	##########	~~~~~~~~~ www.MySW.fr ~~~~~~~~	##########
//	##########	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	##########
//	######################################################

//	Si la requête est bien la mise en cache des images
if ($_GET['action'] == 'cacheJSImg') {
	//	Création de l'entête
	header("Content-Type: text/plain ; charset=utf-8");
	//	anti Cache pour HTTP/1.1
	header("Cache-Control: no-cache , private");
	//	anti Cache pour HTTP/1.0
	header("Pragma: no-cache");
	

	//	######################################################
	//	##########	Initialisation des variables	##########
	//	######################################################
	
	$dirname = './images/';		//	Chemin d'accès (répertoire) des images pour PHP
	$dirJS = 'images/';			//	Chemin d'accès (répertoire) des images pour la fonction $.preload() de JS
	$dir = opendir($dirname);	//	Raccourci d'opendir
	$i = 0;						//	Initialisation de la boucle à 0
	

	//	######################################################
	//	##########	Parcourir le répertoire à la	##########
	//	##########		Recherche d'images			##########
	//	######################################################
	while($file = readdir($dir)) {	//	Simple boucle
		if($file != '.' && $file != '..' && !is_dir($dirname.$file)) {	//	Selectionne les fichiers "valide"
			if (substr($file, -3) == "gif") {				//	Si image GIF
				$tblImages['gif'][] = substr($file, 0, -4);	//	Ajoute au tableau l'image GIF en question
			} 
			elseif (substr($file, -3) == "jpg") {			//	Si image JPG
				$tblImages['jpg'][]  = substr($file, 0, -4); //	Ajoute au tableau l'image JPG en question
			}
			elseif (substr($file, -3) == "png") {			// Si image PNG
				$tblImages['png'][] = substr($file, 0, -4); //	Ajoute au tableau l'image PNG en question
			}
		$i++;
		}
	}
	closedir($dir);	//	Fermeture du dossier
	$tblImages['dirName'] = $dirJS;	//	Ajoute le répertoire spécifique a JS des images du tableau
	$tabeau['dir01'] = $tblImages;	//	Initialisation du tableau pour le premier répertoire
	
	//	Vidage du tableau d'images pour le prochaîn répertoire
	$tblImages['gif'] = "";	
	$tblImages['jpg'] = "";
	$tblImages['png'] = "";
	
	//	La même chose qu'au dessus !
	$dirname = './imgLayoute/';
	$dirJS = 'imgLayoute/';
	$dir = opendir($dirname);
	$i = 0;
	while($file = readdir($dir)) {
		if($file != '.' && $file != '..' && !is_dir($dirname.$file)) {
			if (substr($file, -3) == "gif") {
				$tblImages['gif'][] = substr($file, 0, -4);
			} 
			elseif (substr($file, -3) == "jpg") {
				$tblImages['jpg'][]  = substr($file, 0, -4);
			}
			elseif (substr($file, -3) == "png") {
				$tblImages['png'][] = substr($file, 0, -4);
			}
		$i++;
		}
	}
	closedir($dir);
	
	$tblImages['dirName'] = $dirJS;
	$tabeau['dir02'] = $tblImages;

	//	Préparation à la conversion des résultats
	$tblResult = array('resultats'=>$tabeau);
	//	Conversion des résultats en JSON
	$resultat = json_encode($tblResult);
	//	Envoye du résultat
	echo $resultat ;
} else {
	echo 'Erreur: Requête inconnue.';
}
?> 


Fichier: index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="language" content="fr" />

		<title>[MySW.fr] - Mise en cache d'images</title>
		
		<!--	Framework	JQuery	-->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.preload-min.js"></script>
		
		<script type="text/javascript">
			
			//	Au chargement de la page dès que JQuery est chargé
			$(document).ready(function() {
				$("#imgLoad").css("display", "none");
				//	Envoie une requête ajax de type get pour récupérer les images listées à mettre en cache
				$.ajax({
					type: "GET",
					url: "imgDir.php",
					data: "action=cacheJSImg",
					success: function(result){
						//	Réponse au format JSON
						reponseJson = $.parseJSON(result);
						dir01 = reponseJson.resultats.dir01; //	Répertoire des images 01 (ex: dossier01/)
						dir02 = reponseJson.resultats.dir02; //	Répertoire des images 02 (ex: dossier02/)
						
						//	S'il y a des images GIF à charger dans ce répertoire
						if (dir01.gif) {
							listFileType = dir01.gif;	//	Variable pas indispensable mais plus pratique
							i = 0;						//	Initialisation de la boucle a 0
							$.each(listFileType, function(i) {
								//	Mise en cache l'image avec la librairie preload de jquery
								$.preload( [ $(listFileType).get()[i] ], {
									base:dir01.dirName,
									ext:'.gif'
								});
								i++;					// Incrémente la boucle
							});
						}
						//	S'il y a des images JPG à charger dans ce répertoire
						if (dir01.jpg) {
							listFileType = dir01.jpg;
							i = 0;
							$.each(listFileType, function(i) {
								$.preload( [ $(listFileType).get()[i] ], {
									base:dir01.dirName,
									ext:'.jpg'
								});
								i++;
							});
						}
						if (dir01.png) {
							listFileType = dir01.png;
							i = 0;
							$.each(listFileType, function(i) {
								$.preload( [ $(listFileType).get()[i] ], {
									base:dir01.dirName,
									ext:'.png'
								});
								i++;
							});
						}
						
						if (dir02.gif) {
							listFileType = dir02.gif;
							i = 0;
							$.each(listFileType, function(i) {
								$.preload( [ $(listFileType).get()[i] ], {
									base:dir02.dirName,
									ext:'.gif'
								});
								i++;
							});
						}
						if (dir02.jpg) {
							listFileType = dir02.jpg;
							i = 0;
							$.each(listFileType, function(i) {
								$.preload( [ $(listFileType).get()[i] ], {
									base:dir02.dirName,
									ext:'.jpg'
								});
								i++;
							});
						}
						if (dir02.png) {
							listFileType = dir02.png;
							i = 0;
							$.each(listFileType, function(i) {
								$.preload( [ $(listFileType).get()[i] ], {
									base:dir02.dirName,
									ext:'.png'
								});
								i++;
							});
						}
						$("#imgLoad").css("display", "block");
					}

				});
			});
				
		</script>

	</head>
	<body>
		<div id="imgLoad">Les images ont bien été mises en cache !<br /><i>By G.Allan [<a href="http://www.mysw.fr">MySW.fr</a>]</i></div>
	</body>
</html>

Conclusion

Comme vous avez pu le voir, la source n'est pas très optimisée, à vous de l'améliorer si vous voulez vous en servir en l incorporant dans une POO pour y ajouter plus de fonctionnalités par exemple.

Fichier Zip

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

imagesAutoCache
- images
  - ajax-loaderBar.gif 10 819 octets
  - ajax-loaderSmall.gif 1 849 octets
  - ajax-loaderTilte.gif 723 octets
  - bottom.png 1 238 octets
  - chatLogo.gif 261 947 octets
  - chatLogo.png 31 250 octets
  - jareck.jpg 17 866 octets
  - loading.gif 1 435 octets
  - logo_16.png 803 octets
  - logo_300.png 44 501 octets
  - logo_32.png 1 883 octets
  - logo_50.png 2 672 octets
  - nav.png 1 052 octets
  - overlay.png 997 octets
  - search.png 1 227 octets
  - Thumbs.db6 656 octets
  - top.png 1 246 octets
- imgLayoute
  - bg_bg_Captcha2.png 457 octets
  - bg_Captcha1.png 1 158 octets
  - boy_check.png 1 141 octets
  - boy_uncheck.png 1 144 octets
  - corner_blue_left.png 295 octets
  - corner_blue_right.png 278 octets
  - corner_inset_left.png 339 octets
  - corner_inset_right.png 334 octets
  - corner_left.png 296 octets
  - corner_right.png 262 octets
  - dot.gif 43 octets
  - dot_blue.png 124 octets
  - girl_check.png 1 141 octets
  - girl_uncheck.png 1 139 octets
  - magnifier.png 716 octets
  - menu_left.png 1 911 octets
  - menu_left_noti.png 2 215 octets
  - menu_right.png 291 octets
  - sprites.png 3 176 octets
- devImgAutoCache.jpg 125 895 octets
- imgDir.php 3 692 octets
- index.html 3 926 octets
- jquery.preload-min.js 2 662 octets

Télécharger le zip

Historique

04 juin 2011 11:04:05 :: Modification du code et zip, oublie d'inclure les images .GIF du seconde répertoire, optimisation d'une variable.

Sources du même auteur

[JEUX] SIMULATEUR DE POKER EN AJAX

Toutes les sources de Allan007

Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator

CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Toutes les sources de la catégorie Trucs & Astuces

Sources en rapport avec celle ci

DIAPORAMA SIMPLE PAR IFRAME par sartoz

ROTATION D'UNE IMAGE, ANIMATION par william voirol

ALBUM PHOTO 3D(MERCI ADELAMI) AVEC GESTION FICHIER CONFIG (E... par ylebailly

CONTOURNER LE BUG IE6 QUI N'AFFICHE PAS LES IMAGES ÉCRITE AV... par micmonay

AUTO COMPLETION SUR CHAMPS TEXTE par ryosama

Commentaires et avis

Aucun commentaire pour le moment.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Précharger une (des) image(s) [ par bonsai ] [font=Trebuchet MS] Bonjour, Je cherche le moyen le plus simple et le plus compatible de précharger des images. J'ai trouvé plusieurs solu utiliser ajax pour ouvrir une nouvele page dans la page en cours [ par msiham05 ] salut a tous le monde j'ai un probleme dans l'utilisation utiliser ajax pour ouvrir une nouvele page dans la page en cours [ par msiham05 ] salut a tous le monde j'ai un probleme dans l'utilisation utiliser ajax pour ouvrir une nouvele page dans la page en cours [ par msiham05 ] salut a tous le monde j'ai un probleme dans l'utilisation mauvais fonctionnement du cache avec les images pre-chargees [ par sunelis ] Bonjour à tousle site que je réalise est hebergé sur un serveur IIS et j'ai différents boutons réalisés à partir de deux images (une dans la position Précharger des images ? [ par TheRedman ] J'ai un menu et quand la souris passe dessus l'image change. J'ai essayé avec une image plus lourde (250 ko) et il faut plusieurs secondes avant qu'el Une image se cache deriere un formulaire contenant un div [ par skully ] bjr à ts, j'ai un pbmj'ai ds ma page jsp (ou html, c'est pareil) un formulaire qui est ds un <div>, parmis les contenus de ce formulaire, j'ai précharger ou afficher une partie d'image [ par nemetos ] Bonjour,je voudrais savoir si c'est possible de précharger dans un objet image ou d'afficher seulement une partie d'une image. L'idée est d'avoir qu'u Tester le chargement du cache [ par typhoon ] Bonjour, Après moultes recherches, je passe à la dernière étape : Poser une question... En effet, je n'arrive pas à résoudre le problème suivant: Je Zoom sur une image en ajax [ par ircland ] Bonjour,mes niveau de ajax etant nul, et de javascript moyen, je cherche une source qui me permet de zoomer sur une image onmouseover, enfait je veux

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

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
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€

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