Javascript DOMContentLoaded有一个神秘的5-10秒的延迟。

Question

我真的很困惑。我在一个测试站点上有一个相当动态的页面，它使用Bootstrap的旋转木马(但我希望这是我的代码，而不是他们的代码，这是错误的)。

在这里可以找到测试页面：http://bit.ly/ZjLl19

你会注意到如下..。

• 页面开始加载。
• 工作人员的肖像开始出现
• 然后..。在大约5-10秒内什么也不会发生
• 5-10秒后，一个旋转木马出现，上面有工作人员的传记和更大的肖像。

为什么会有这样的延迟？我已经查看过Webkit调试器，在DOMContentLoaded运行之前，我可以在时间线上看到空闲时间。有什么想法吗？

谢谢!

Answer 1

其实这是个简单的解决办法。只需将active类应用于第一个元素以显示它(或者您希望首先显示哪个元素)。否则，您将等待dom加载，旋转木马已经初始化以便为您完成此操作。

因此，下面这样做就可以立即显示旋转木马，而不必等待JS：

<div class="carousel-inner">
    <div class="item mtt-item active">...</div>
    <div class="item mtt-item">...</div>
</div>

Answer 2

指出要注意：

( 1)你暂停了你的旋转木马。这可能解释了最初的停顿。旋转木马自动继续下一张幻灯片，显示默认延迟后的后续幻灯片很明显是5000毫秒。

$('.carousel.paused-by-default').carousel('pause');

2)暂停的旋转木马在初始暂停后使用以下代码显示：

info = setTimeout(function(){reveal_content();}, 500);

3) 更新-忽略前两个观测结果()

旋转木马似乎是从幻灯片-1开始的.由于没有幻灯片-1，旋转木马的高度保持在0px.旋转木马的高度只在第一张幻灯片完成动画后才更新到560px。这就是为什么第一张幻灯片没有动画的原因，在默认的幻灯片延迟5000之后，它似乎突然弹出，加上大约1秒的额外动画速度(如第1点所述)。若要解决此问题，请同时使用以下两种解决方案。

====================================

帮助您解决问题的方法：

1)将其添加到$(document).ready()函数的结束括号之前，立即显示第一张幻灯片：

$('.carousel').carousel(0);

2)如果前面的点没有完全解决问题，将#mtt-carousel和.carousel-inner的高度设置为560 If，在#1中前面的JS语句之前添加这一点。

$('#mtt-carousel, .carousel-inner').css('height', '560px');

或CSS：

#mtt-carousel, .carousel-inner { height: 560px !important; }

Answer 3

我建议你做以下工作：

1. 缩小图像的大小。
2. 将您的css文件合并为一个。
3. 合并js文件。
4. Gzip css和js文件。压缩将大大提高加载时间。
5. 缩小css和js，删除这些文件中不需要的空间将减少它们的大小。
6. 您可以通过指定资源的过期日期和时间来利用浏览器缓存。