Mise en cache d'images auto [ajax]
Soyez le premier à donner votre avis sur cette source.
Vue 6 452 fois - Téléchargée 646 fois
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 !
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.
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.
Codes Sources
A voir également
- Jquery preload images
- Jquery preload image - Meilleures réponses
- Cache ajax - Meilleures réponses
- PHP : Preload images avec image loader et mise en cache javascript - CodeS SourceS - Guide
- Jquery tooltip image map area ✓ - Forum - Javascript / DHTML
- Affichage aleatoire d'une image et rafraichissement automatique javascript et jquery - Conseils pratiques - Javascript
- Preload d'images externes mutiples - Codes sources - Flash (ActionScripts)
- Javascript : Système de notation (rating) 2.0 en javascript (survol d'image, sans jquery !) - - Guide
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.