出现这种情况是因为DOMLoaded事件在页面实际渲染之前几毫秒被触发。
简而言之，这意味着您必须优化网站的速度。这并不意味着使其下载速度更快，而是以正确的顺序、以非阻塞方式下载。
第一步：您的标记
1) 看起来您可以做很多事情来优化您的标记。首先，样式表和JavaScript文件的顺序可以进行优化。为了确保CSS文件异步下载，您必须始终在外部JavaScript文件之前包含外部CSS。style.css在一些/全部JavaScript调用后下载。
在head中找到了1个脚本块，位于外部CSS文件和另一个资源之间。为了允许并行下载，请将内联脚本移到外部CSS文件之前或下一个资源之后。
2) 您的主JavaScript文件是内联在您的标记中的。这不仅会阻止页面下载，直到脚本完成下载，还会导致（或增加）白色闪烁，因为它在您的内容之前。
我推荐在head中异步加载您的脚本。然后，您将不得不在DOM完成加载时触发脚本，或者可以通过将脚本放在body标记底部来实现相同的结果。
第二步：利用浏览器的功能
1) 查看http头时，发现有28个项目被作为单独的HTTP调用提供，这些项目在浏览器上没有被缓存（包括html页面、jpg图像、样式表和JavaScript文件）。
这些项目明确是不可缓存的，通过编辑您的Web服务器配置很容易解决。
2) 启用gzip压缩。大多数web浏览器（包括IE）都支持gzip解压缩，大多数（如果不是全部）web服务器都支持使用gzip压缩。您甚至可以过度使用，并查看SPDY，这是一种替代较轻的HTTP协议（受Chrome和Firefox支持）。
第三步：内容服务
您的域名有大约30个单独的项目正在提供服务。首先，考虑如何减少此请求数量。每个页面视图的30个HTTP请求是很多的。您可以使用以下方法来解决这个问题:
1）在多个主机名之间进行并行下载。浏览器目前限制了对单个域的并发连接数。从不同的域（例如img.bigtim.ca）提供图像可以使它们与其他内容一起并行提供。
2）将多个项目合并为一个。许多被下载的项目仅是样式内容，例如标志、菜单元素等。这些可以组合成一个单一的图像（仅下载一次），并使用CSS进行分割。这称为CSS精灵技术。Stack Overflow就是这样做的：请看这里。
3）如果无法减少需要下载的项目数量，可以通过从一个无cookie的域中提供静态内容来减轻服务器负载（从而减轻客户端浏览器的负载）。Stack Overflow对其所有静态内容（例如图像、样式表和脚本）都使用此方法。
第四步：优化自己的代码
HTTP和浏览器技术能为您的网站速度提供帮助的空间有限。这最后一步取决于您自己。
1）您是否有什么理由选择自己托管jquery？Jquery下载页面显示了多个CDN，您可以指向这些CDN以获取速度快、缓存的脚本下载。
2）目前在您的样式表中有超过20个未使用的CSS规则（占用了整个CSS文件的36%）。重新考虑一下到底需要什么。
3）主要的JavaScript代码块（位于body标签的顶部）似乎是一个尝试加速的hack，但可能没有起到任何作用。
设置了一个cookie来指定页面是否已经淡出。您不仅在使用JavaScript执行可以轻松通过CSS执行的转换，而且超过一半的脚本用于定义读写cookie的功能。
看到像这样的代码：$("body").css ("background-image", "url('images/background.png')"); 和 $("#website").show ();，通常让我开始对“关注点分离”发表评论，但此答案已经足够长了，希望您能看出在同一段代码中混合样式和功能是不好的实践。
补充说明：查看代码，根本没有必要使用jquery来执行你正在做的事情。但话又说回来，也没有必要执行你正在做的事情，所以您可能完全可以不使用JavaScript来做得更好。
