IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Application des css au chargement (retard)


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut 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

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut
    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.

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut
    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.

    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.

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Probleme de chargement des CSS avec Tomcat
    Par netking2006 dans le forum Tomcat et TomEE
    Réponses: 2
    Dernier message: 28/05/2007, 21h12
  2. Réponses: 1
    Dernier message: 30/03/2007, 17h40
  3. [HTML][CSS] Comment empecher l'application des styles
    Par ardi dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 28/03/2006, 11h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo