$（document）.ready（）也是CSS准备好了吗？
我有一个在$（document）.ready（）上执行的脚本，它应该在我的布局中垂直对齐块元素。 90％的时间，它的工作没有问题。 然而，对于额外的10％发生的两件事之一：
进行对中所需的时间明显滞后，并且块元素跳转到位。 这可能仅仅是与性能相关的 - 因为页面大小通常很大，并且有相当多的javascript一次执行。
居中将完全混乱，而块元素将推倒得太远或不够远。 看起来好像它试图计算高度，但得到不正确的测量。
为什么在DOM-ready上执行脚本没有任何理由将所有正确的CSS值注入到DOM中？ （所有的CSS都通过<link>在<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);
谢谢。
从1.3发行说明：
ready（）方法不再试图保证等待所有样式表加载。 相反，所有CSS文件都应该包含在页面上的脚本之前。 更多信息
从ready（fn）文档：
注意：请确保所有样式表都包含在脚本之前（尤其是那些调用ready函数的样式表）。 这样做将确保在jQuery代码开始执行之前，所有元素属性都已正确定义。 不这样做会导致零星的问题，尤其是在基于WebKit的浏览器（如Safari）上。
请注意，上述内容甚至不是关于实际渲染CSS，所以在ready()开始时您仍然可以看到屏幕更改。但它应该可以帮助您避免出现问题。
其实，我觉得把JS放在JS之上会解决所有问题，这有点奇怪。 CSS是异步加载的，所以JS加载可以在CSS仍在下载时开始和结束。 所以如果上面的解决方案，然后执行任何JS代码，然后停止，直到所有先前的请求已完成？
我做了一些测试，实际上， 有时 JS会延迟到CSS加载。 我不知道为什么，因为瀑布显示在下载完CSS之前JS已经完成加载。
有关某些HTML及其结果（此延迟为10秒），请参阅JS Bin，并查看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>
在获得jQuery之后，第二个外部JS的另一个测试表明，第二个JS的下载不会在CSS加载之前启动。 在这里， resource.cgi的第一个引用是CSS，第二个是JS：
在JS下面移动样式表确实表明JS（包括ready函数）的运行时间更早，但即使如此，jQuery应用的类（在JS运行时尚未知道）在Safari的快速测试中正确使用和Firefox。 但是有意义的是，像$(this).height()这样的东西在那个时候会产生错误的值。
但是，额外的测试表明， 在加载先前定义的CSS之前，JS暂停并不是一个通用规则 。 似乎有一些使用外部JS和CSS的组合。 我不知道这是如何工作的。
最后说明：由于JS Bin在从裸URL（如jsbin.com/aqeno）运行时在每个脚本中包含Google Analytics， 因此测试结果实际上由JS Bin更改 ...似乎编辑URL上的Output标签，例如jsbin.com/aqeno/edit不包含额外的Google Analytics（分析）功能，并且肯定会得到不同的结果，但该网址很难使用webpagetest.org进行测试。对IE中Stylesheets Block下载和IE中JavaScript执行的引用为了更好的理解，这是一个好的开始，但我还有很多问题要留下......还要注意Steve Souders的IE8并行脚本加载，以使事情变得更加复杂（上面的瀑布是使用IE7创建的）。
也许应该简单地相信发行说明和文档...
CSS / JavaScript / JQuery排序对我来说不起作用，但以下是：
$(window).load(function() { $('#abc')...} );
当所有的DOM节点都可用时，DOM准备好了。 它与CSS无关。 尝试放置之前的样式或尝试加载它不同。
链接地址: http://www.djcxy.com/p/83321.html