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

Question

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

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

您会注意到如下...

• 页面开始加载
• 员工肖像开始出现
• 然后...大约 5-10 秒没有任何反应
• 5-10 秒后，会出现一个轮播，其中包含员工传记和较大的肖像

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

谢谢!

Answer 1

注意事项:

1) 您在 init 上暂停了轮播。这可以解释最初的停顿。轮播自动继续到下一张幻灯片，显示默认延迟后的后续幻灯片 which apparently is 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，在前面的JS之前添加#1 中的声明。

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

或CSS:

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