$（document）.ready（）还准备好了CSS吗？

Question

我有一个在$（document）.ready（）上执行的脚本，它应该在我的布局中垂直对齐块元素。 90％的时间，它没有问题。 然而，对于额外的10％，两件事之一发生：

进行定心所需的时间明显滞后，并且块元素跳入位置。 这可能只是性能相关 - 因为页面大小通常很大，并且有大量的javascript一次执行。
中心将完全搞乱，并且块元素将向下推得太远或不够远。 似乎它试图计算高度，但是测量结果不合适。

有没有理由为什么在DOM-ready上执行脚本会没有将所有正确的CSS值注入到DOM中？ （所有CSS都在<head>通过<link> ）。

此外，这是导致问题的脚本（是的，它是从这里直接采取的）：

 (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);

谢谢。

Answer 1

从1.3发行说明：

ready（）方法不再尝试对等待加载所有样式表做出任何保证。 相反，所有CSS文件都应该包含在页面上的脚本之前。 更多信息

从ready（fn）文档：

注意：请确保在脚本之前包含所有样式表（特别是那些调用ready函数的样式表）。 这样做将确保在jQuery代码开始执行之前正确定义所有元素属性。 如果不这样做将导致偶发问题，特别是在基于WebKit的浏览器（如Safari）上。

请注意，上面的内容甚至不是实际渲染 CSS，所以当ready()启动时你仍然可以看到屏幕更改。但它应该可以避免出现问题。

实际上，我发现将JS放在JS之上会解决所有问题有点奇怪。 CSS是异步加载的，因此JS加载可以在CSS仍在下载时开始和结束 。 因此，如果以上是一个解决方案，那么执行任何JS代码然后停止，直到所有先前的请求完成？

我做了一些测试，事实上，有时 JS会被延迟，直到加载CSS。 我不知道为什么，因为瀑布显示JS已经完成加载很久才下载CSS完成。

请参阅JS Bin以获取一些HTML 及其结果（这有10秒的延迟），并查看webpagetest.org 的瀑布结果。 这使用来自Steve Souders的cuzillion.com的一些脚本来模仿缓慢的反应。 在瀑布中，对resource.cgi的引用是CSS。 因此，在Internet Explorer中，第一个外部JS在请求CSS后立即开始加载（但CSS将需要另外10秒才能完成）。 但是第二个<script>标记在CSS完成加载之前不会执行：

<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>

瀑布与单个外部JS脚本

在获得jQuery之后，使用第二个外部JS进行的另一个测试显示，在加载CSS之前，第二个JS的下载不会启动。 这里，对resource.cgi的第一个引用是CSS，第二个是JS：

带有两个外部JS脚本的瀑布

在所有JS 下面移动样式表确实表明JS（包括ready函数）运行得更早，但即使这样，jQuery应用的类 - 在JS运行时尚未知 - 在我在Safari中的快速测试中正确使用和Firefox。 但有意义的是，像$(this).height()这样的东西会产生错误的值。

但是，其他测试表明， 在加载早期定义的CSS之前，JS不会是一般规则 。 似乎有一些使用外部JS和CSS的组合。 我不知道这是怎么回事。

最后的注意事项：由于JS Bin在每个脚本中包含了Google Analytics（分析），当从裸URL运行时（如jsbin.com/aqeno ， 测试结果实际上是由JS Bin改变的 ......似乎编辑URL上的Output选项卡如jsbin.com/aqeno/edit不包含额外的Google Analytics内容，并且肯定会产生不同的结果，但是使用webpagetest.org很难测试该URL。对Firefox中的样式表块下载和IE中的JavaScript执行的引用由strager是一个更好理解的好开始，但我还有很多问题......还要注意Steve Souders的IE8并行脚本加载使事情变得更复杂。（上面的瀑布是用IE7创建的。）

也许人们应该简单地相信发行说明和文档......

Answer 2

CSS / JavaScript / JQuery排序对我不起作用，但以下是：

$(window).load(function() { $('#abc')...} );

Answer 3

当所有DOM节点都可用时，DOM就会触发。 它与CSS无关。 尝试先定位样式或尝试以不同方式加载它。

Answer 4

据我所知，在加载DOM时会触发ready事件 - 这意味着所有阻塞请求（即JS）都已加载并且DOM树已完全绘制成图形。 IE中的就绪状态依赖于比大多数其他浏览器更慢的事件触发器（document.readyState change vs DOMContentLoaded），因此时间也取决于浏览器。

非阻塞请求（例如CSS和图像）的存在是完全异步的，与就绪状态无关。 如果您处于需要此类资源的位置，则需要依赖于良好的旧onload事件。

Answer 5

根据HTML5，DOMContentLoaded是一个简单的DOM ready事件，不考虑样式表。 但是，HTML5解析算法要求浏览器推迟脚本的执行，直到加载所有以前的样式表。 （ DOMContentLoaded和样式表）

在molily的测试中（2010年），

在加载样式表之前，IE和Firefox阻止了所有后续脚本执行
Webkit仅阻止外部脚本的后续执行（ <script src> ）
Opera没有阻止任何脚本的后续执行

所有现代浏览器现在都支持DOMContentLoaded （2017），因此他们现在可能已经标准化了这种行为。

$（document）.ready（）还准备好了CSS吗？

问题描述

5 个解决方案

解决方案1
63 已采纳 2009-08-24 20:54:20

解决方案2
15 2012-04-26 20:36:27

解决方案3
6 2009-08-24 20:34:28

解决方案4
4 2009-08-24 20:40:27

解决方案5
4 2013-10-06 21:27:24

$（document）.ready（）还准备好了CSS吗？

问题描述

5 个解决方案

解决方案1 63 已采纳 2009-08-24 20:54:20

解决方案2 15 2012-04-26 20:36:27

解决方案3 6 2009-08-24 20:34:28

解决方案4 4 2009-08-24 20:40:27

解决方案5 4 2013-10-06 21:27:24

解决方案1
63 已采纳 2009-08-24 20:54:20

解决方案2
15 2012-04-26 20:36:27

解决方案3
6 2009-08-24 20:34:28

解决方案4
4 2009-08-24 20:40:27

解决方案5
4 2013-10-06 21:27:24