$(document).ready()还准备好了CSS吗？

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

进行定心所需的时间明显滞后,并且块元素跳入位置.这可能只是性能相关 - 因为页面大小通常很大,并且有大量的javascript一次执行.

中心将完全搞乱,并且块元素将向下推得太远或不够远.似乎它试图计算高度,但是测量结果不合适.

有没有理由为什么在DOM-ready上执行脚本会没有将所有正确的CSS值注入到DOM中？(所有CSS都在via a中).

此外,这是导致问题的脚本(是的,它是从这里直接采取的):

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

谢谢.

从1.3发行说明:

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

从ready(fn)文档:

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

请注意,上面的内容甚至不是实际渲染 CSS,因此您可能会在ready()启动时看到屏幕更改.但它应该可以避免出现问题.

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

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

见JS斌的一些HTML和它的结果(这个有10秒的延迟),并看到webpagetest.org为它的瀑布效果.这使用来自Steve Souders的cuzillion.com的一些脚本来模仿缓慢的反应.在瀑布中,引用resource.cgi是CSS.因此,在Internet Explorer中,第一个外部JS在请求CSS后立即开始加载(但CSS将需要另外10秒才能完成).但是第二个

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