11521 sujets

JavaScript, DOM et API Web HTML5

Préchargement d'images

Bonjour à tous
En examinant les performances réseau d'une page qui contient un carrousel je me rends compte que chaque fois que l'image change il y a une activité réseau.
Cela est dû vraisemblablement à ce que le script change dynamiquement le contenu du src de l'image.
Je suppose qu'il doit y avoir des moyens plus efficaces de faire la même chose.
Voici le bout de code en question

<figure id="diaporama">
    <img id="img2" src="" alt=""/>
    <img id="img1" src="" alt=""/>
</figure>



#diaporama {
	margin:0 auto;
	text-align:center;
	position:relative;
}
#diaporama:before {
	content: '';
	padding-top: 37%;  /* la hauteur de la zone d'affichage est 37% de sa largeur */
	display: inline-block;
}
#diaporama img{
	width:100%;
	position:absolute;
	top:0;
	left:0;
}



this.getNextImage = function() {
    this.img1 = document.getElementById('img1');
    this.img2 = document.getElementById('img2');
    this.img1.src = this.Images[this.index++];
    this.setOpacity(100);
    this.index = this.index % this.Images.length;
    this.img2.src = this.Images[this.index];
    setTimeout('Transition();', 20);
}

Explications: "this.Images" contient la liste des adresses des images du carrousel, initialisée au démarrage de la page, "this.index" est l'index de l'image dans cette liste
Les deux images sont superposées et la transition consiste à changer régulièrement l'opacité de l'image du dessus pour faire apparaître l'image du dessous et à relancer nexImage quand l'opacité de l'image du dessus est devenue nulle.
Merci de vos conseils
Modifié par PapyJP (10 May 2017 - 12:41)
Modérateur
Hello.

Il y a en gros trois grandes écoles:

1) Toutes les images sont présente au début sur la page. Certaines sont cachées. Le carrousel les anime juste.
Avantages: Très simple à mettre en place, pas de sur chargements inutiles. référencement assuré.
Inconvénients: On charge beaucoup plus lors du chargement de la page, au détriment du temps de chargement de la page

2) Comme dans ton cas, on ne place aucune image dans le HTML (ou juste la première) et on charge une nouvelle image à chaque changement.
Avantages: Assez simple à mettre en place, chargement initial rapide
Inconvénients: Une fois la boucle effectuée, chaque image sera requêtée à nouveau. Mais normalement cela ne concerne que les en-têtes car l'image est en cache.

3) Le mélange des deux précédente: On charge dynamiquement les images, mais on garde les images créées dans le dom, pour que les rotations suivantes n'aient plus à s’embarrasser de cela.
Avantages: Solution la plus optimisée
Inconvénients: Plus complexe à mettre en place.

Voilà en gros les grandes options, chacune est défendable suivant le projet/situation/envie du moment. On peut bien entendu imaginer d'autres options: Charger la première image, attendre le chargement complet de la page, charger et placer les autres images, lancer le carrousel.
Merci de ta réponse
Je pense que ta dernière solution est judicieuse.
Il me semble que le plus simple est de mettre un conteneur pour chaque image, plutôt que travailler sur l'image elle même. Il suffit de faire un childReplace, ça ne doit pas être trop compliqué à faire
Sujet clos
Aller à