Optimiser chargement images
Résolu/Fermé
mimigenie
Messages postés
1180
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
-
12 août 2012 à 22:24
irongege Messages postés 40847 Date d'inscription jeudi 1 novembre 2007 Statut Modérateur Dernière intervention 29 juin 2023 - 15 août 2012 à 20:55
irongege Messages postés 40847 Date d'inscription jeudi 1 novembre 2007 Statut Modérateur Dernière intervention 29 juin 2023 - 15 août 2012 à 20:55
A voir également:
- Optimiser chargement images
- Optimiser pc - Guide
- Optimiser windows 10 - Guide
- Images gratuites - Guide
- Google images - Guide
- Chargement des ressources logitech g hub - Forum Logiciels
5 réponses
gilbert1995
Messages postés
414
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
30 mai 2013
29
13 août 2012 à 02:58
13 août 2012 à 02:58
function getExtension(filename) {
return filename.split('.').pop().toLowerCase();
}
function load(n1, n2) {
$.post("file.php", { start: n1, stop: n2 },
function(data) {
MyData = data;
MyArray = MyData.split(',');
$(MyArray).each(function(){
if((getExtension(this)=="jpg")||(getExtension(this)=="jpeg")||(getExtension(this)=="png")||(getExtension(this)=="gif")) {
$('#test').append('<img width="200px" src='+this+' /><br />');
}
});
});
}
file.php
<?php
$dir_nom = 'images/'; // dossier images
$dir = opendir($dir_nom) or die('Erreur de listage : le répertoire n\'existe pas'); // on ouvre le contenu du dossier courant
$fichier= array(); // on déclare le tableau contenant le nom des fichiers
while($element = readdir($dir)) {
if($element != '.' && $element != '..') {
if (!is_dir($dir_nom.'/'.$element)) {$fichier[] = $element;}
}
}
closedir($dir);
if(!empty($fichier)){
sort($fichier);
foreach($fichier as $k=>$lien) {
if(($k >= $_POST['start'])&&($k <=$_POST['stop'])) {
echo "$dir_nom$lien,";
}
}
}
?>
et tu l'utilise comme ceci:
<script>
load(0,999);//Load les 1000 premieres images
</script>
ensuite tu as juste a faire un bouton qui appelera le lot suivant exemple <input type='button' onclick='load(999,1999)' value='next' />
mimigenie
Messages postés
1180
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
312
15 août 2012 à 20:54
15 août 2012 à 20:54
J'ai finalement utiliser ajax, à chaque fois qu'on clique sur le bouton et ca lance le chargement d'une partie des images, comme ca le visiteur peut répartir le chargement.
Je publie le code au cas où ca pourrait aider quelqu'un d'autre.
<ul id="fileContent">
<?php
$i=1;
while( $i <= 621 )
{
echo "<li><img src='../images/3/$i.png' alt='$i' title='$i' /></li>";
$i++;
}
?>
</ul>
<script>
var ari = 622;
function loadFile(file) {
var xhr = new XMLHttpRequest();
// On souhaite juste récupérer le contenu du fichier, la méthode GET suffit amplement :
xhr.open("GET", "go.php?i=" + ari, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);
ari= ari+1000;
xhr.onreadystatechange = function() { // On gère ici une requête asynchrone
if (xhr.readyState == 4 && xhr.status == 200) { // Si le fichier est chargé sans erreur
var newLink = document.createElement('span');
document.getElementById('fileContent').appendChild(newLink);
newLink.innerHTML = xhr.responseText;
}
}
xhr.send(null); // La requête est prête, on envoie tout !
}
(function() { // Comme d'habitude, une fonction anonyme pour éviter les variables globales
var inputs = document.getElementsByTagName('input'),
inputsLen = inputs.length;
for (var i = 0 ; i < inputsLen ; i++) {
inputs[i].onclick = function() {
loadFile(this.value); // À chaque clique, un fichier sera chargé dans la page
};
}
})();
</script>
Je publie le code au cas où ca pourrait aider quelqu'un d'autre.
<ul id="fileContent">
<?php
$i=1;
while( $i <= 621 )
{
echo "<li><img src='../images/3/$i.png' alt='$i' title='$i' /></li>";
$i++;
}
?>
</ul>
<script>
var ari = 622;
function loadFile(file) {
var xhr = new XMLHttpRequest();
// On souhaite juste récupérer le contenu du fichier, la méthode GET suffit amplement :
xhr.open("GET", "go.php?i=" + ari, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);
ari= ari+1000;
xhr.onreadystatechange = function() { // On gère ici une requête asynchrone
if (xhr.readyState == 4 && xhr.status == 200) { // Si le fichier est chargé sans erreur
var newLink = document.createElement('span');
document.getElementById('fileContent').appendChild(newLink);
newLink.innerHTML = xhr.responseText;
}
}
xhr.send(null); // La requête est prête, on envoie tout !
}
(function() { // Comme d'habitude, une fonction anonyme pour éviter les variables globales
var inputs = document.getElementsByTagName('input'),
inputsLen = inputs.length;
for (var i = 0 ; i < inputsLen ; i++) {
inputs[i].onclick = function() {
loadFile(this.value); // À chaque clique, un fichier sera chargé dans la page
};
}
})();
</script>
irongege
Messages postés
40847
Date d'inscription
jeudi 1 novembre 2007
Statut
Modérateur
Dernière intervention
29 juin 2023
5 054
15 août 2012 à 20:55
15 août 2012 à 20:55
Lut
Merci de ce retour.
Merci de ce retour.
gilbert1995
Messages postés
414
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
30 mai 2013
29
12 août 2012 à 23:13
12 août 2012 à 23:13
Cela pourrais peut-etre t'aider http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
mimigenie
Messages postés
1180
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
312
12 août 2012 à 23:45
12 août 2012 à 23:45
Merci mais c'est un peu la solution de dernier recourt, c'est plus pour le préchargement et moi j'aimerais l'inverse, charger des images après que la page soit chargée et non avant.
Car je pense que ce qui pose problème, c'est surtout le nombre d'image qu'il y a à charger mais ca je ne peux pas le réduire, c'est pourquoi j'aimerais l'étaler, le découper en plusieurs parties qu'on peut charger uniquement si on le désire et ce en cliquant sur un bouton ou un lien.
Une barre de progression, ca camoufle uniquement, j'ai compté qu'il falait environs 5 min pour tout charger si c'est la première fois qu'on va sur la page ( donc rien dans le cache ).
Le script lazy load était une solution ( charger uniquement les images quand elles apparaissent à l'écran, donc toutes les images qu'on ne voit pas ne sont pas chargées tant qu'on ne fait pas défiler la page ) mais bizarrement ca ne fonctionne pas, le script ne fait pas sont boulot, pourquoi je ne sais pas, peut-être à cause que c'est dans une cellule d'un tableau. C'est pourquoi je cherche une alternative.
Ou alors le top serait d'arriver à toutes les charger en moins d'une minute mais ca me semble impossible :/
Car je pense que ce qui pose problème, c'est surtout le nombre d'image qu'il y a à charger mais ca je ne peux pas le réduire, c'est pourquoi j'aimerais l'étaler, le découper en plusieurs parties qu'on peut charger uniquement si on le désire et ce en cliquant sur un bouton ou un lien.
Une barre de progression, ca camoufle uniquement, j'ai compté qu'il falait environs 5 min pour tout charger si c'est la première fois qu'on va sur la page ( donc rien dans le cache ).
Le script lazy load était une solution ( charger uniquement les images quand elles apparaissent à l'écran, donc toutes les images qu'on ne voit pas ne sont pas chargées tant qu'on ne fait pas défiler la page ) mais bizarrement ca ne fonctionne pas, le script ne fait pas sont boulot, pourquoi je ne sais pas, peut-être à cause que c'est dans une cellule d'un tableau. C'est pourquoi je cherche une alternative.
Ou alors le top serait d'arriver à toutes les charger en moins d'une minute mais ca me semble impossible :/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
mimigenie
Messages postés
1180
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
312
13 août 2012 à 20:26
13 août 2012 à 20:26
J'utilise surement mal ton script car j'ai une erreur : la variable start n'est pas définie.
Comme je mets tout dans un seul fichier, quelle partie du code affiche les images ? car je dois les afficher dans une zone précise de ma page.
Comme je mets tout dans un seul fichier, quelle partie du code affiche les images ? car je dois les afficher dans une zone précise de ma page.
13 août 2012 à 14:51