Application des css au chargement (retard)

Bonjour
C'est pour une question générale sur le chargement de ma page qui n'est pas net, dans le sens où les css semblent être appliqués avec retard.

Par exemple :
- les éléments n'apparaissent pas tous en même temps
- dans FF et IE les éléments en display: table-cell; (à moins que ce ne soient autre chose) sont positionnés avec un retard qui fait qu'on les voit bouger
- dans IE les polices sont d'abord affichées en défaut avant que le css du body ne soit appliqué (pareil, léger retard)

Est ce que c'est une question de css ou faut il prévoir autre chose pour remédier à ça ( comme afficher la page dans un onload en js ) ?
En vous remerciant par avance

Ben c'est normal.
Quand tu appelles une URL, le serveur te renvoie le code HTML de la page. Ton navigateur récupère, parse et affiche le document. Quand il tombe sur ton appel à la feuille de style, il doit la récupérer avant de l'interpréter et d'appliquer les styles, donc pendant ce temps, la page continue à s'afficher, mais sans les styles.
Donc plus ta feuille de style sera lourde, plus grand sera le décalage.

Ok merci
Donc effectivement si on voulait un truc qui affiche la page une fois les styles appliqués il faudrait passer par le js, et le onload ($( document ).ready()) arrive trop tôt.

Citation:

---

le onload ($( document ).ready()) arrive trop tôt

---

onload et .ready() sont deux événements différents. .ready() correspond à l'événement DOMReady, c'est-à-dire lorque le DOM est créé mais avant que l'ensemble des ressources soient chargées.
Tu peux donc passer par $( document ).on('load', function(){...}). Mais je vois pas trop l'utilité à part continuer à surcharger une page qui semble déjà l'être un peu trop...

Citation:

---

onload et .ready() sont deux événements différents

---

D'accord ils sont différents, mais ils sont tous deux déclenchés avant l'application des css apparemment.

Citation:

---

Mais je vois pas trop l'utilité

---

Voici ma page (pour écrans d'ordi uniquement, pas encore adaptée aux mobiles), on voit qu'elle n'est pas particulièrement surchargée, elle est plutôt light.

Au chargement on voit que ça bouge : la liste est triée une 1ère fois, ce qui est censé faire comprendre qu'elle est triable justement, et par la suite faire comprendre que le menu 'Trier par' sert à ça.
Problème : le menu en question bouge aussi au 1er positionnement, alors ça brouille un peu, on ne sait plus ce qui bouge et ce qui ne bouge pas...
Disons que si il n'y avait pas ce mouvement de départ je ne chipoterais pas là dessus, mais là ça me gène un peu.

Déjà, tu devrais essayer de charger les polices Google en dernier, ça t'évitera de bloquer une connexion serveur prématurément...
Ensuite, le retard que tu observes, il n'est pas spécialement lié aux feuilles de style mais aux effets jQuery.

Citation:

---

Déjà, tu devrais essayer de charger les polices Google en dernier

---

En dernier ? J'ai essayé de placer le style à la fin du head mais ça ne change rien (?)
A propos est il beaucoup plus long d'aller chercher la police chez google plutôt que dans son dossier ?

Citation:

---

Ensuite, le retard que tu observes, il n'est pas spécialement lié aux feuilles de style mais aux effets jQuery.

---

Très juste !
En fait c'est même l'installation de l'objet (isotope) dans la div du menu qui provoque ce décalage à droite.
Alors là c'est plus pénible, je suppose qu'il faudrait fouiller dans la library pour voir d'où il peut venir ..

Ok donc finalement le positionnement visible était bien dû à l'initialisation du jQuery : la largeur bouge à l'initialisation (même si ce n'est pas le cas à l'affichage) et comme il était calé par la droite, tout bougeait ...
J'ai défini un width fixe pour la div contenante.

Rien à voir avec ma question de base donc, mais merci de m'avoir aiguillé.