Problème de saccade avec le positionnement des photos

Version imprimable

02/04/2007, 23h41
kervano

Problème de saccade avec le positionnement des photos

Bonjour,

Je ne savais pas trop ou poster, mais je pense que le forum Design est plus approprié à mon problème, puisque gène visuel...

J'ai constaté que j'ai depuis le début un problème de saccade lorsque l'on clic sur l'une des catégories, comme par exemple : Soin du visage...

L'effet est assez désagréable car on voit très rapidement les photos aller de gauche à droite pour finalement bien se positionner... (cela me rappelle le minitel :) ).
Je souhaiterai que les photos soit directement positionner pour ainsi éviter la gène visuel.

Voici l'url de mon site pour constater le désagrément : [url]

Je précise que cela ne vient pas de mon hébergeur puisque cela me le fait également en local sous easyphp.

Tu peux faire un préchargement de la page avant de l'afficher mais bon ...

Exemple :

Code:

1
2
3
4
5
6
7
8
<body onload="document.getElementById('chargement').style.display='none';document.getElementById('site').style.visibility='visible';">
<div id="chargement" style="width:150px;height:50px;position:absolute;top:0;left:0;color:#f00;font-weight:bold;font-size:14px">
   Chargement ...
</div>
<div id="site" style="visibility:hidden">
   <!-- ici tout ton site -->
</div>
</body>

03/04/2007, 10h22
blueice

Il s'agit juste de la page qui positionne les éléments au fur et à mesure, pour réduire le problème, tu pourrais comme le dit Bisunurs précharger les éléments, mais uniquement pour réduire l'effet et éventuellement réduire le poids de ta page.
03/04/2007, 14h54
MasterOfChakhaL

Salut,

Si tu connais à l'avance les dimensions de tes images. Le fait de les définir explicitement (style="width:...px;height:...px") devrait règler ton problème.
Si tu fais comme ca, le navigateur n'aura pas besoin d'attendre que l'image soit entièrement téléchargée pour la placer correctement
03/04/2007, 17h03
kervano

Bonjour,

Merci à vous tous de me répondre si rapidement ;)
Je ne suis pas très fort, mais ou dois coller cette portion de code?

Citation:

<body onload="document.getElementById('chargement').style.display='none';document.getElementById('site').style.visibility='visible';">
<div id="chargement" style="width:150px;height:50px;position:absolute;top:0;left:0;color:#f00;font-weight:bold;font-size:14px">
Chargement ...
</div>
<div id="site" style="visibility:hidden">

</div>
</body>

En vous remercians,
Patrick
03/04/2007, 17h44
cedsun

Salut,

Je ne pense pas que le préchargement des images changera les choses.

Je suis plutôt de l'avis de MasterOfChakhaL, il faut pré-dimensionner les cellules contenant les visuels.

M'enfin, je trouve pas que cet effet soit gênant.
04/04/2007, 09h56
10-nice

regarde ou tu a tes balises body sur ta page, tu a juste à rajouter une div avec ecrit chargement, et une autre ou tu mettra le contenu actuel de ton site qui existe déjà.

Citation:

<body onload="document.getElementById('chargement').style.display='none';document.getElementById('site').style.visibility='visible';">
<div id="chargement" style="width:150px;height:50px;position:absolute;top:0;left:0;color:#f00;font-weight:bold;font-size:14px">
Chargement ...
</div>
<div id="site" style="visibility:hidden">

</div>
</body>