Bonjour à tous.
 
Contexte
Je possède actuellement un site pour faire la promotion de mon travail photographique ( www.bullesdesavon.fr). Pour présenter les photos, j'ai utilisé un diaporama en javascript qu'on peut trouver ici : http://www.guillaumevoisin.fr/deve [...] vec-jquery
 
Problème rencontré
Sur certaines pages où le nombre de photos est relativement important ( par exemple la page mariage : http://bullesdesavon.fr/Mariage/index.html ) l'affichage des premières images est problématique sur les connections un peu lente. C'est à dire qu'on se retrouve à voir les images s'afficher au fur et à mesure, comme au bon vieux temps du 56k. Du coup, le diaporama démarre et les premières images sont affichées de manière incomplètes ce qui ne fait pas très "pro".
 
Tentative d'analyse du problème et de résolution
J'ai regardé un peu de mon coté, et j'ai pu lire un peu partout que le navigateur chargeait les éléments de manière séquentielle ( ici, les images) en parcourant la page html de haut en bas. Pourtant, le fait de voir que les premières images ne sont pas affichés intégralement me fait penser que le navigateur essaie de charger toutes les images en même temps. Du coup voilà mes questions :
 
- Comment se fait il que le chargement des images ne se fassent pas de manière séquentielle, mais toutes en même temps ?  
- Quelle solution peut on envisager pour que l'affichage des images soient correctes ( préchargement des premières images ? autre ? )
 
D'avance merci !

Tes images font entre 200 et 400ko c'est un petit peu n'importe quoi , je viens de me prendre 17mo dans la gueule.

Je te conseille déjà de réduire le poids de tes images
si je prends cette photo qui fait 247Ko :

Et que je réduit son poids à 66Ko, (via enregister pour le web de photoshop) j'obtiens cette image :

Donc tu peux au moins diviser par 5 le poids de tes images, et passer de 17mo à 3.5 mo d'images

L'autre problème vient du script, qui va ne va pas attendre le chargement des images et commencer directement à afficher la première image. Il faudra que ce script soit revu, et qu'il s'occupe lui même de charger les images à partir d'une liste.

Merci pour ta réponse !
 
Effectivement, je voulais garder une qualité optimale des photos, et donc pas les compresser ( garder un jpg qualité 100% ). Je vais jeter un oeil à ça ( voir comment ça fonctionne, pour m'assurer qu'il n'y a pas trop de dégradation de qualité). C'est sur que ça risque de réduire le temps de téléchargement.
 
Sinon, je me débrouille en html, mais en javascript, je patauge complétement. Malgré tout, que le script n'attende pas le chargement de toutes les images ne me semblent pas problématique en soit, si l'image qu'il doit afficher est déjà téléchargée. Par contre, je ne vois pas pourquoi le script aurait besoin d'avoir toutes les images dès son démarrage.  
 
Si d'autres personnes ont des idées concernant le script, je suis prenneur.  

Jpeg qualité 100%, sachant que c'est seulement sur ton site, j'ai réduit en 60% et quand tu regardes bien ça passe nickel en 60%.
 
Le script utilise directement les balises IMG donc il n'en a pas besoin au démarrage

Merci pour la remarque sur la taille des images. Effectivement, à 60% c'est très difficile de voir une différence avec l'original et le gain en place est vraiment significatif. Je viens donc de changer toutes les images du site. Je pense que sera bénéfique pour tout le monde.  
 
Pour le script, effectivement, il utilise les balises img, que les images soient chargées ou pas ( et ça, je l'avais compris ).  
Ma question est plutôt: Pourquoi on a pas un téléchargement des images une par une par le navigateur, mais toute en même temps ? Il me semblait pourtant que le navigateur chargeait les éléments dans l'ordre de lecture de la page. Ai-je tort à ce sujet, et le fait qu'il essaie de télécharger toutes les images en même temps soit normal ?  
 
Je suis toujours preneur d'explications

En fait le navigateur télécharge par petit paquet, genre, par paquet de 10 les fichiers, c'est pour ça qu'il est important sur une page web de limiter le nombre de requêtes afin de permettre de charger plus rapidement sa page web.
 
Je pense que ce script devrait être remanié et ne plus avoir de tag <img> pour les images mais une liste d'images prédéclarée, cela évite le chargement de contenus qu'on ne désire pas forcément.

Dans Google, chercher sur la requête "javascript preload image".