Question

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

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

你会注意到的是......

页面开始加载
工作人员肖像开始出现
然后...... 大约5-10秒没有任何反应
5-10秒后，出现一个带有工作人员传记和更大肖像的旋转木马

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

谢谢！

Answer 1

注意事项：

1）你在初始化时暂停了你的旋转木马。这可以解释最初的暂停。轮播自动继续到下一张幻灯片，显示默认延迟which apparently is 5000ms后的后续幻灯片。

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

2）在初始暂停后，暂停的轮播使用以下代码显示自己：

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

3） [更新 - 忽略第一次两次观察]

CAROUSEL要从幻灯片 -1 开始。由于没有幻灯片 -1 ，轮播的高度保持在0px。在第一张幻灯片完成动画后，轮播的高度仅更新为560px。这就是为什么第一张幻灯片没有动画，它似乎 pop 无处不在，在默认幻灯片延迟5000之后，加上大约一秒的额外动画速度（如点中所述）＃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

我建议你做以下事情：

缩小图片尺寸。
将您的css文件合并为一个。
合并js文件。
Gzip css和js文件。压缩将大大缩短加载时间。
缩小css和js，删除这些文件中不需要的空间会减小它们的大小。
您可以通过指定资源的到期日期和年龄来利用浏览器缓存。

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

3 个答案: