Discussion :

[j.p.mignot]

Voici ce dont il est question:
Ma page d'accueil contient une carte au format jpg qui est relativement grande.
Le temps de chargement s'en trouve par conséquence pénalisé.
Question: ( probable php)
comment peut-on charger RAPIDEMENT une "ébauche" de l'image puis, la compléter 'à temps perdu' alors que la page d'accueil est déjà chez le client?
Merci pour toutes réponses!

[htr999]

peut-être avec ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<img id="grandeImage" src="uneImageBlanche" width="largeurDeLImageACharger" height="hauter">
<script>
// script à mettre à la fin du code juste avant body
document.getElementById("grandeImage").src = "lienImageACharger";
</script>

a+

[Bovino]

Pour ma part, j'aurais plutôt procédé autrement :

• Charger la page avec l'image 'basse résolution'
• Charger l'image normale dans une div de 0 de hauteur et 0 de largeur
• Tester dans un setInterval la propriété complete de l'image
• Quand le complete est ok, changer le src de l'image affichée du 'basse résolution' vers le normal

[htr999]

ça me parait pas mal le procédé de Bovino
sinon en fouillant j'ai trouvé ceci pas mal non plus (basé sur Ajax GoogleJSAPI)
http://sahid.funraill.org/wp-content...th-fadein.html
ou bien
http://sahid.funraill.org/2008/08/19...en-javascript/

seul défaut de ces 3 méthodes: JS désactivé ?.? (à traiter l'accessibilité)

[j.p.mignot]

Pour ma part, j'aurais plutôt procédé autrement :

* Charger la page avec l'image 'basse résolution'
* Charger l'image normale dans une div de 0 de hauteur et 0 de largeur
* Tester dans un setInterval la propriété complete de l'image
* Quand le complete est ok, changer le src de l'image affichée du 'basse résolution' vers le normal

J'ai déjà essayé qqch comme cela mais j'ai eu 2 soucis.
1- ( du à mon manque d'expérience du WEB) : si je met une série de x images avec des résolutions de + en + fines, quand réellement le serveur les download?
si tout est downloadé au début je n'aurrais qu' empiré le problème.
2- Lors de la mise en place du dessin de qualité 'q+1' en lieu et place de celui de qualité 'q', la page est "sale" et peu présentable.

en fait je download l'image de qualité q+1 dans une image 'hidden' puis
fait une transition de l'image de qualité q a celle q+1 avec des change opacity après avoir correctement positionné les éléments.

Mais cela est LOURD!!!
De plus je ne sait pas comment coté client vérifier que l'image à été complètement transférée du serveur afin de faire le swapping.

[Bovino]

si je met une série de x images avec des résolutions de + en + fines,

Tu me fais peur là... tu as combien d'images ???

De plus je ne sait pas comment coté client vérifier que l'image à été complètement transférée du serveur afin de faire le swapping.

La propriété complete de l'objet image, un booléen qui t'indiques si l'image a été chargée ou non.