Est de $(document).prêt() également CSS prêt?

J'ai un script s'exécutant sur $(document).prêt() qui est censé alignez verticalement élément de bloc dans ma mise en page. 90% du temps, il fonctionne sans problème. Cependant, pour que 10% de l'une des deux choses suivantes se produit:

  • Il y a un évident décalage dans le temps qu'il faut pour faire le centrage, et les éléments de bloc de saut en position. Ce pourrait être tout simplement lié à la performance - comme la taille de la page est souvent grande et il y a une bonne quantité de javascript qui est en cours d'exécution à la fois.

  • Le centrage sera complètement en désordre, et l'élément de bloc sera soit poussé trop loin ou pas assez loin. Il semble comme si elle a essayé de calculer la hauteur, mais a été d'obtenir une mauvaise mesure.

Est-il une raison pourquoi l'exécution d'un script sur les DOM-prêt n'auraient pas tous la bonne CSS valeurs injectées dans les DOM encore? (tous les CSS est dans le <head> via un <link>).

Aussi, voici le script qui est à l'origine du problème (oui, il a été pris directement à partir de ici):

 (function ($) {
    //VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
      return this.each(function(i) {
        var ah = $(this).height();
        var ph = $(this).parent().height();
        var mh = (ph - ah) / 2;
        $(this).css('margin-top', mh);
      });
    };
  })(jQuery);

Grâce.

  • Existe-il des images impliqués? Même après que les styles sont calculées, le chargement des images peut causer de la nouvelle disposition.
InformationsquelleAutor Bryan M. | 2009-08-24
  1. 63

    De la 1.3 notes de version:

    Le prêt() la méthode n'essaie plus de faire aucune garantie quant à l'attente de toutes les feuilles de style, à être chargé. Au lieu de cela tous les fichiers CSS doivent être inclus avant les scripts sur la page. Plus D'Informations

    De la prêt(fn) de la documentation:

    Remarque: assurez-vous que toutes les feuilles de styles sont inclus avant vos scripts (en particulier ceux qui appellent la fonction ready). Ainsi donc assurez-vous que toutes les propriétés des éléments sont correctement définis avant de jQuery code commence à exécuter. À défaut, cela va entraîner des problèmes sporadiques, en particulier sur WebKit, navigateurs tels que Safari.

    Remarque que ci-dessus n'est même pas sur le fait d' rendu le CSS, vous pouvez toujours voir l'écran de changement quand ready() coups de pied dans. Mais il devrait vous sauver de problèmes.

    En fait, je trouve ça un peu étrange qu'il suffit de placer le CSS au-dessus de la JS permettra de résoudre tous les problèmes. Le CSS est chargé de manière asynchrone, donc JS chargement peut commencer et la finition alors que le CSS est encore en cours de téléchargement. Donc, si ce qui précède est une solution, alors l'exécution de tout code JS est alors interrompue jusqu'à ce que toutes les demandes antérieures ont terminé?

    J'ai fait quelques tests, et en effet, parfois JS est retardée jusqu'à ce que le CSS est chargé. Je ne sais pas pourquoi, parce que la chute d'eau montre que la JS le chargement est terminé long avant de télécharger le CSS a fini.

    Voir JS Bin pour code HTML et ses résultats (ce qui a un délai de 10 secondes), et de voir webpagetest.org pour sa cascade résultats. Il utilise un script de Steve Souders' cuzillion.com pour imiter la lenteur des réponses. Dans la chute d'eau, la référence à resource.cgi est le CSS. Donc, dans Internet Explorer, la première JS externe se charge juste après le CSS a été demandé (mais que CSS va prendre 10 secondes de plus à la fin). Mais la deuxième <script> balise n'est pas exécutée jusqu'à ce que le CSS a fini de charger ainsi:

    <link rel="stylesheet" type="text/css" href=".../a script that delays.cgi" />

<script type="text/javascript" src=".../jquery.min.js"></script> 

<script type="text/javascript"> 
  alert("start after the CSS has fully loaded"); 
  $(document).ready(function() { 
    $("p").addClass("sleepcgi"); 
    alert("ready"); 
  });         
</script>

    Est de $(document).prêt() également CSS prêt?

    Un autre test avec un deuxième JS externe après l'obtention de jQuery, montre que le téléchargement de la deuxième JS n'est pas commencé jusqu'à ce que le CSS est chargé. Ici, la première référence à resource.cgi est le CSS, le deuxième de la JS:

    Est de $(document).prêt() également CSS prêt?

    Le déplacement de la feuille de style ci-dessous tous les JS montre en effet que le JS (y compris les ready fonction) s'exécute beaucoup plus tôt, mais même alors, le jQuery-classe appliquée --ce qui est encore inconnu lorsque la JS s'exécute-- est utilisé correctement dans mes tests rapides dans Safari et Firefox. Mais il est logique que des choses comme $(this).height() donnera de mauvaises valeurs de l'époque.

    Cependant, des tests supplémentaires montre que il n'est pas un générique de la règle que le JS est arrêtée jusqu'à ce que la définition antérieure CSS est chargé. Il semble y avoir une certaine combinaison avec l'utilisation des CSS et JS. Je ne sais pas comment cela fonctionne.

    Dernières notes: JS Bin inclut Google Analytics dans chaque script lors de l'exécution de la nue-URL (comme jsbin.com/aqeno, les résultats des tests sont effectivement modifié par JS Bin... Il semble que la Sortie sur l'onglet modifier les URL de la forme jsbin.com/aqeno/edit n'inclut pas les autres de Google Analytics choses, et certainement produit des résultats différents, mais que l'URL est difficile de test à l'aide de webpagetest.org. La référence à Les feuilles de style de Bloquer les Téléchargements de Firefox et d'Exécution de JavaScript dans IE donnée par strager est un bon début pour une meilleure compréhension, mais j'ai eu beaucoup de questions à gauche... à noter Également Steve Souders' IE8 Parallèle Script de Chargement pour rendre les choses encore plus compliquées. (Les chutes d'eau ci-dessus sont créés à l'aide de IE7.)

    Peut-être que l'on devrait simplement croire les notes de publication et de documentation...

    • Cuzillion (stevesouders.com/cuzillion) devrait vous aider à comprendre comment les différents types d'objets sont chargés dans les différents navigateurs.
    • ...mais c'est encore pas de réponse définitive. Peut-être, même si les choses sont en <head> ou <body>? Et compte tenu de la les feuilles de style de Bloquer les Téléchargements de Firefox et d'Exécution de JavaScript dans IE (donc, quels sont les autres navigateurs?) et IE8 Parallèle Script de Chargement je suppose que beaucoup de problèmes peuvent survenir pour le vertical et l'alignement de script. Et en passant: la chute d'eau pour le dernier IE8 webpagetest.org/result/090825_24AP ne PAS montrer le parallèle de chargement, et ressemble à IE7 webpagetest.org/result/090825_24AQ
    • Je pense que votre question, et surtout, que IE8 Parallèle Script de Chargement, va me faire dormir pire les semaines à venir... 😉 quant à votre question: voir ci-JS Bin pour une version avec votre vAlign fonction (légèrement modifié pour permettre à l'aide du CSS), qui montre bien que $(this).height(); le rendement peut être de zéro lorsque le CSS est chargé après le JavaScript, mais semble très bien lorsqu'il est chargé avant que. Mais encore, ne sachant pas le pourquoi, j'ai peur chaque navigateur peut se comporter différemment: jsbin.com/ofola/edit
    • Les navigateurs télécharger les feuilles de style de manière asynchrone, mais de bloquer les scripts dessous de l'exécution jusqu'à ce que les feuilles de style ont chargé. Qu'ils ont deviné que les auteurs ne voulez interroger les informations de style dans les scripts, ils ont donc de bloquer l'exécution afin de garantir que les styles sont disponibles.
    • Il en fait des blocs jusqu'à ce que l'élément est affiché, donc js pouvez interroger les valeurs, et pas seulement jusqu'à ce que la feuille de style des charges. Ceci est appelé la disposition de bousiller et c'est une source fréquente de problèmes de performances.
    InformationsquelleAutor Arjan
  2. 15

    CSS/JavaScript/JQuery commande ne fonctionne pas pour moi, mais ce qui suit ne:

    $(window).load(function() { $('#abc')...} );
    • même ici. J'ai eu du mal à IE9 avec js cours d'exécution avant de styles ont été rendues, mais en remplaçant $(document).prêt avec ce fixe mes questions. bizarro. Merci quand même 🙂
    • même jquery écrit ceci: "Alors que JavaScript fournit la charge de l'événement pour l'exécution de code lorsqu'une page est affichée, cet événement ne se déclencher jusqu'à ce que tous les éléments tels que des images ont été entièrement reçu." api.jquery.com/ready donc, je vais aussi essayer de le résoudre à l'aide de cette
    • J'ai testé, css/js réorganisation ne résout pas le problème pour moi lors du chargement d'une feuille de style externe ce fait dans les deux Opera et Chrome.
    • C'est l'option nucléaire. L'événement load arrive souvent moyen au plus tard dans les dom-prêt il suffit de considérer l'effet de lourds image d'actifs, Facebook iframes etc. Si un script est retardée jusqu'après l'événement de chargement, il peut prendre plusieurs secondes jusqu'à ce qu'il exécute.
    InformationsquelleAutor Martin Dvorak
  3. 6

    Les DOM prêt déclenche lorsque tous les nœuds DOM sont disponibles. Il n'a rien à voir avec les CSS. Essayez de placer le style avant ou essayez de charger différemment.

    InformationsquelleAutor fphilipe
  4. 4

    Au meilleur de ma connaissance, les prêts événement est déclenché lorsque le DOM est chargé, ce qui signifie que tous le blocage des demandes (JS) ont chargé et l'arbre du DOM est entièrement tracé. Le prêt de l'etat dans IE s'appuie sur un rythme plus lent événement déclencheur de document.readyState changement vs DOMContentLoaded) que la plupart des autres navigateurs de sorte que le moment est navigateur charge également.

    L'existence de non-blocage des demandes (comme CSS et images) est totalement asynchrone et non liée à l'état prêt. Si vous êtes dans une position où vous avez besoin de ces ressources dont vous avez besoin dépendent de la bonne vieille événement onload.

    • Tout en faisant quelques tests j'ai appris aujourd'hui que d'une certaine façon de télécharger CSS peut être bloquant (pour l'exécution de certaines des prochaines <script> balises, pas pour la cuisson de la ready fonction elle-même). Mais si c'était la raison pour downvote, puis j'aurais aussi aimé voir quelques explications. M'aurait évité de faire quelques tests...
    • Je n'étais pas celui qui downvoted vous, mais vous pouvez regarder ceci: stevesouders.com/cuzillion/...
    • CSS les téléchargements sont non-blocage, mais ils peuvent bloquer l'exécution de la suite des scripts.
    • Le lien ci-dessus a obtenu d'être le PLUS confusion-à-dire iframe scripts peuvent être bloqués par des feuilles de style dans le parent. Suis-je malentendu? Grave!!!
    InformationsquelleAutor annakata
  5. 4

    Selon HTML5, DOMContentLoaded est une plaine DOM prêt événement sans prendre les feuilles de style en compte. Cependant, le HTML5 algorithme d'analyse d'exiger des navigateurs de reporter l'exécution de scripts jusqu'à ce que toutes les précédentes feuilles de style sont chargés. (DOMContentLoaded et les feuilles de style)

    Dans molily de tests (2010),

    • IE et Firefox a bloqué toutes postérieure à l'exécution du script jusqu'à ce que les feuilles de style chargé
    • Webkit bloqué ultérieure d'exécution de scripts externes (<script src>)
    • De l'opéra de ne pas bloquer l'exécution subséquente pour tous les scripts

    Tous les navigateurs modernes supportent maintenant DOMContentLoaded (2017), de sorte qu'ils peuvent avoir standardisé ce problème maintenant.

    InformationsquelleAutor sam