Optimiser chargement images
Résolu
mimigenie
Messages postés
1180
Date d'inscription
Statut
Membre
Dernière intervention
-
irongege Messages postés 41001 Date d'inscription Statut Modérateur Dernière intervention -
irongege Messages postés 41001 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'ai une page dans laquelle je dois charger 14 621 images, la taille varie entre quelques ko et quelques centaines de ko et elles sont toutes au format png ( obligatoire vu que j'ai besoin de la transparence ) pour un poids total de 200mo environs
Mon problème est que évidemment ca prend du temps à charger.
Sachant que mes images sont optimiser du mieux possible ( taux de compression maximum, pas de méta-donné, dimension réduite, etc. ) je cherche un façon de soulager le navigateur du visiteur.
Donc est-ce que quelqu'un a une idée pour étaler le chargement des images ( j'ai essayé lazy load comme script mais il ne fonctionne pas dans mon cas), pour post-charger les images. Une fois la page chargé et 1000 images affichés les 13 000 autres images s'affichent soit au fur et à mesure soit par groupe de 1000 à chaque fois qu'on clique sur un bouton mais je ne sais pas comment faire.
Pour ceux qui veulent tout savoir ma page consiste en un canvas dans lequel on peut mettre les images de la liste déroulante ( celle qui contient les 14 621 images ) puis les déplacer dans le canvas pour faire une sorte de collage avec les images.
Si vous le désirez je peux coller le code ici ( simple boucle php qui affiche les images dans une liste à puce )
Je connais bien html/css/php mais beaucoup moins javascript.
Est-ce que quelqu'un saurait m'aider ou me donner une piste où chercher svp ?
J'ai une page dans laquelle je dois charger 14 621 images, la taille varie entre quelques ko et quelques centaines de ko et elles sont toutes au format png ( obligatoire vu que j'ai besoin de la transparence ) pour un poids total de 200mo environs
Mon problème est que évidemment ca prend du temps à charger.
Sachant que mes images sont optimiser du mieux possible ( taux de compression maximum, pas de méta-donné, dimension réduite, etc. ) je cherche un façon de soulager le navigateur du visiteur.
Donc est-ce que quelqu'un a une idée pour étaler le chargement des images ( j'ai essayé lazy load comme script mais il ne fonctionne pas dans mon cas), pour post-charger les images. Une fois la page chargé et 1000 images affichés les 13 000 autres images s'affichent soit au fur et à mesure soit par groupe de 1000 à chaque fois qu'on clique sur un bouton mais je ne sais pas comment faire.
Pour ceux qui veulent tout savoir ma page consiste en un canvas dans lequel on peut mettre les images de la liste déroulante ( celle qui contient les 14 621 images ) puis les déplacer dans le canvas pour faire une sorte de collage avec les images.
Si vous le désirez je peux coller le code ici ( simple boucle php qui affiche les images dans une liste à puce )
Je connais bien html/css/php mais beaucoup moins javascript.
Est-ce que quelqu'un saurait m'aider ou me donner une piste où chercher svp ?
A voir également:
- Optimiser chargement images
- Optimiser son pc - Accueil - Utilitaires
- Tcp optimiser - Télécharger - Optimisation
- Optimiser windows 10 - Guide
- Des images - Guide
- Optimiser et défragmenter le lecteur - Guide
5 réponses
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
Statut
Membre
Dernière intervention
313
Merci beaucoup, je teste ca ce soir et je te dis si ca fonctionne bien :)
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>
Cela pourrais peut-etre t'aider http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
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