Mise en cache d'images auto [ajax]

Télécharger le projet
Commenter

Description

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 / Exemple : 


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

Du même auteur (Allan007)