Un bug disgracieux au démarrage de mon site

[invite234d9cdb]

Bonsoir à tous !

J'ai commencé à mettre en ligne ce soir un petit site web de mon cru : http://supcomfaguide.com. Tout se passe bien à part un détail qui me fache : lors du chargement de certains "chapter" du site, en l'occurence le chapter 2 et le chapter 3, un redimensionnement disgracieux de la page à lieu durant parfois une à deux secondes. Ca donne ceci pour le chapitre 3 : http://supcomfaguide.com/bug.png. Notez la bande blanche verticale à droite qui n'est pas censée exister.

J'ai tenté d'isoler la ligne de code html responsable pour finalement arriver à la conclusion que n'importe quelle page de mon site contenant trop de texte et images subissait ce redimensionnement fugitif. Le chapter 2 et 3 en souffrent tout simplement parce que ce sont les plus gros chapitres.

Je n'ai pas la moindre idée de comment corriger ce bug. La structure de chaque page du site est identique et donne ceci :

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nothing">
<tr>
<td width="100%" align="center">

<table border="0" cellpadding="0" cellspacing="0" align="center" width="950">

<tr>
<td width="50"></td>
<td width="15" background="ombre.png"></td>
<td bgcolor="#ffffff">

<table border="0" cellpadding="0" cellspacing="0" width="780" style="margin-left:20px; margin-right:20px; margin-top:25px; margin-bottom:10px;">
<tr><td bgcolor="#ffffff">

<table border="0" cellpadding="0" cellspacing="0" width="780" height="45" style="margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;">
<tr>
<td width="505"></td>
<td valign="top" width="170"><a href="index.html" onMouseOver="noidea.src=bover.src" onMouseOut="noidea.src=bout.src" target="_self"><img src="back.png" name="noidea" galleryimg="no" border="0"></a></td>
<td valign="top" width="105"><a href="#B" onMouseOver="itsbottom.src=bottomover.src" onMouseOut="itsbottom.src=bottomout.src" target="_self"><img src="bottom.png" name="itsbottom" galleryimg="no" border="0" width="105" height="51"></a></td>
</tr>
</table>

</td></tr>
<tr><td bgcolor="#ffffff">



CONTENU DE LA PAGE




<table border="0" cellpadding="0" cellspacing="0" width="780" style="margin-left:0px; margin-right:0px; margin-top:60px; margin-bottom:0px;">
<tr>
<td width="479" valign="bottom"><img src="copyright.png" width="479" height="14" galleryimg="no" border="0"></td>
<td width="76"></td>
<td width="170" valign="bottom"><a onMouseOver="breal.src=bover.src" onMouseOut="breal.src=bout.src" href="index.html" target="_self">

<img src="back.png" name="breal" galleryimg="no" border="0"></a></td>
<td width="55" valign="bottom">

<a href="#T" target="_self">
<img src="top.png" onMouseOver="treal.src=tover.src" onMouseOut="treal.src=tout.src" name="treal" galleryimg="no" border="0"></a></td>
</tr>
</table>
</td></tr></table>
</td>
<td width="15" height="100" background="ombreR.png"></td>
<td width="50"></td>
</tr>
<tr>
<td width="50"></td>
<td width="15" height="15" background="cornerB.png"></td>
<td height="15" background="ombreB.png"></td>
<td width="15" height="15" background="cornerR.png"></td>
<td width="50"></td>
</tr>
<tr>
<td width="50" height="50"></td>
<td width="15" height="50"></td>
<td height="50"></td>
<td width="15" height="50"></td>
<td width="50" height="50"></td>
</tr>

</table>
</td>
</tr>
</table>

Je me doute bien que peu de gens pourront m'aider, mais je tente ma chance D'avance merci pour toute aide !
-----

[Towl]

Ohh un fan de SupCom, voila quelqu'un de bien

Sinon il ne s'agit pas d'un bug mais d'un problème inhérent à ton design : les images sont chargés dans l'ordre d'apparition dans le source. Or tes pages contiennent beaucoup d'image et l'ombre droite est située ... à la fin

Une solution c'est de tricher un peu. tu crées un div en tout début de page avec les images prioritaires avec la propriété hidden (ou invisible ou je sais plus quoi ). Comme ca, elle seront chargée au tout début mais ta zone de préchargement ne sera pas affichée

[invite234d9cdb]

Je ne suis pas habitué des balises div; pourrais-tu me souffler la ligne de code a insérer ?

Cela dit je ne suis pas sur que ton astuce va marcher : la disgracieuse bande blanche fait une largeur de 62 pixels. OmbreR.png ne fait que 15 pixels de large.



PS : je ne pensais pas que SupCom était populaire au point de trouver des joueurs ici ! C'est plutôt sympa ^^

[Towl]

Essaye en rajoutant cela en entête, juste apres <body> (a la limite mets y toutes tes ombres)

 <div style="visibility: hidden; display: none;">
    <img src="ombreB.png" />
</div> 
  

[A voir en vidéo sur Futura]

[invite234d9cdb]

Ca n'a pas marché j'en ai bien peur Le bande de +/- 62 pixels apparaît toujours au chargement (faut insister pour la voir, elle apparaît une fois sur 10 environ).

[invite234d9cdb]

Bon hé bien j'ai finalement résolu le problème. Je suppose qu'on ne saura jamais d'où il venait puisque qu'en gros j'ai réécrit tout le code de base d'une autre façon et que ce nouveau code n'aboutit plus au bug

Dans tous les cas merci d'avoir bien voulu te pencher sur mon pb, Towl