$(document).ready()还准备好了CSS吗？
Bry*_* M. 48 javascript css jquery
我有一个在$(document).ready()上执行的脚本,它应该在我的布局中垂直对齐块元素.90%的时间,它没有问题.然而,对于额外的10%,两件事之一发生:
进行定心所需的时间明显滞后,并且块元素跳入位置.这可能只是性能相关 - 因为页面大小通常很大,并且有大量的javascript一次执行.
中心将完全搞乱,并且块元素将向下推得太远或不够远.似乎它试图计算高度,但是测量结果不合适.
有没有理由为什么在DOM-ready上执行脚本会没有将所有正确的CSS值注入到DOM中？(所有CSS都在<head>via a中<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);
谢谢.
Arj*_*jan 63
从1.3发行说明:
ready()方法不再尝试对等待加载所有样式表做出任何保证.相反,所有CSS文件都应该包含在页面上的脚本之前.更多信息
注意:请确保在脚本之前包含所有样式表(特别是那些调用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秒才能完成).但是第二个<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进行的另一个测试显示,在加载CSS之前,第二个JS的下载不会启动.这里,第一个引用resource.cgi是CSS,第二个是JS:
移动样式表下面所有的JS的确表明,JS(包括ready函数)运行早得多,但即使如此,当JS runs--在我的Safari和快速检测正确使用jQuery的应用类,可呈现还未知Firefox浏览器.但是那样的事情$(this).height()会产生错误的价值.
但是,其他测试表明,在加载早期定义的CSS之前,JS不会是一般规则.似乎有一些使用外部JS和CSS的组合.我不知道这是怎么回事.
最后说明:作为JS斌从裸露的URL运行时,包括谷歌Analytics(分析)在每个脚本(如jsbin.com/aqeno,测试结果实际上是由JS斌改变了 ......看来,在编辑URL,如输出选项卡jsbin.com/aqeno/edit不包括附加的谷歌Analytics(分析)的事情,也一定产生不同的结果,但该网址是很难用webpagetest.org进行测试.到参考样式表模块下载在IE浏览器Firefox和JavaScript执行按以下给出strager是一个良好的开端更好的理解,但我就剩了许多问题......还要注意史蒂夫Souders的IE8并行脚本加载,使事情更加复杂.(瀑布上面使用IE7创建的.)
也许人们应该简单地相信发行说明和文档......
- 浏览器异步下载样式表,但阻止它们下面的脚本*执行,直到加载样式表.他们猜测作者会想要在后续脚本中查询样式信息,因此他们必须阻止执行以保证样式可用. (2认同)
Mar*_*rak 15
CSS/JavaScript/JQuery排序对我不起作用,但以下是:
$(window).load(function() { $('#abc')...} );
- 这是核选择.加载事件通常发生在晚于dom-ready之前 - 只考虑重图像资产,Facebook iframe等的影响.如果脚本延迟到加载事件之后,它可能需要几秒钟才能执行. (2认同)
| 归档时间： |
|
| 查看次数： |
31763 次 |
| 最近记录： |