Le site se charge sur la droite, puis passe à sa position réelle

Question

Il y a un lien en bas. À peu près ce qui se passe, c'est quand la page s'ouvre, elle se charge entièrement sur le côté droit de l'écran. Puis quand il finit de charger chaque élément, il se déplace vers le centre qui est sa position réelle.

Je crois que le problème est causé par javascript, car le site fonctionne parfaitement bien sans elle. Cela ne semble pas important quel javascript est inclus, si je ne laisse que 1 d'entre eux, le tout revient.

Pourrait vraiment utiliser l'aide. En outre, le site est actuellement d'environ 500 pages, donc j'espère vraiment une solution qui peut résoudre ce problème en quelques étapes.

Merci.

Voici le lien vers la page afin que vous pouvez obtenir css/code: http://bit.ly/3EyoWu

Answer 1

Son certainement javascript. Je pense que les bannières sur votre site sont chargées à la toute fin, ce qui laisse le navigateur faire des suppositions incorrectes sur les dimensions du contenu jusqu'à ce que la page soit chargée. Essayez d'entourer votre code javascript à l'intérieur de divs ou de tables de largeur fixe (et de hauteur). Vous pouvez facilement déterminer la largeur (et la hauteur) requise par le code généré par javascript en inspectant votre page après son chargement. Si c'est les bannières, elles sont presque toujours de taille prédéfinie.

Édition 1 ----

Je l'ai. Les largeurs de cellule spécifiées pour votre table sont plus étroites, le navigateur est donc incapable de calculer la mise en page jusqu'à ce que la page est rendue complètement. Une colonne de largeur 110px a une bannière ayant une largeur = 120px.

Modifier 2 ----

essayez de spécifier des largeurs pour tous mais, une colonne. Autrement dit, si vous avez trois colonnes dans la table suspecte, spécifiez la largeur pour deux, et laissez le navigateur décider de la largeur pour le troisième. De plus, les bannières semblent occuper une largeur de 125px au lieu de 120px, probablement à cause d'un espace blanc inutile autour d'elles. Je suggère que vous révisiez les largeurs de colonne de manière appropriée (et la largeur de la table parente si nécessaire).

Answer 2

Cela pourrait presque être considéré comme un «flash de contenu non créé» (FOUC), sauf que le navigateur ne rend pas d'abord une page dans un format non stylé.

Au lieu de cela, vous voyez Styled Content avant le Javascript peut ajouter la touche finale.

Vous pouvez obtenir d'autres indices en recherchant 'flash of unstyled content'.