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

Question

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

测试页面可在此处找到：http://bit.ly/ZjLl19

你会注意到如下。。。

• 页面开始加载
• 员工肖像开始出现
• 然后大约5-10秒内不发生任何事情
• 5-10秒后，一个旋转木马出现，上面有员工传记和更大的肖像

为什么会延迟？我在Webkit调试器中查看过，在DOMContentLoaded运行时，在发生任何其他事情之前，我可以在时间轴中看到空闲时间。有什么想法吗？

谢谢！

Answer 1

注意：

1） 您在init上暂停了转盘。这可以解释最初的停顿。转盘自动继续到下一张幻灯片，显示默认延迟后的后续幻灯片，默认延迟显然是5000ms。

$('.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的高度设置为560px，并将其添加到#1中的前一条JS语句之前。

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

或CSS:

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

Answer 2

这实际上是一个简单的修复方法。只需将活动类应用于第一个元素即可显示它（或者先显示哪个元素）。否则，您将等待dom加载，并且转盘已初始化，以便为您执行此操作。

因此，下面的操作将完成任务，并立即显示转盘，而无需等待JS:

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

Answer 3

我建议您执行以下操作：

1. 缩小图像大小。

2. 将css文件合并为一个。

3. 合并js文件。

4. Gzip css和js文件。压缩将大大缩短加载时间。

5. 最小化css和js，删除这些文件中不需要的空间将减小它们的大小。

6. 您可以通过指定资源的到期日期和期限来利用浏览器缓存。