为什么Javascript导致FOUC

时间:2013-01-16 18:44:33

标签: javascript jquery onload domready fouc

我正在研究具有大量Javascript和jQuery的a site - 据我所知,大部分内容在文档准备好后被触发加载。但是,当页面加载时,您将获得大约一秒的白色FOUC。但如果您完全禁用Javascript,则根本没有白色闪存。

如何在页面加载之前确保Javascript没有开始加载?已经大量使用

 $(document).ready(function(){ /*. . .*/});

...所以Javascript不应该在页面加载完成后才会触发并呈现......对吗?但不知何故,页面等待脚本在渲染之前完成 - 即使它不需要,因为页面仍然看起来很好,Javascript完全禁用。

2 个答案:

答案 0 :(得分:1)

我要尝试的第一件事是重新排序脚本和样式标记,以便在任何javascript文件之前包含所有外部css文件。

我使用Chrome的开发者工具进行审核,发现13个样式表包含在javascript文件下面。由于浏览器通常只允许2个并发连接,如果加载html但是样式表下载排在其他资源之后,你可以看到这个flash。

这也可以解释为什么在评论中为什么其他人很难再现你所看到的东西 - 他们有不同的连接速度等等。

答案 1 :(得分:1)

$(document).ready()表示DOM已准备就绪,但不一定是页面已完全加载。如果要等到页面加载,请使用body onload或window onload事件。