1

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

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

你会注意到如下...

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

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

谢谢！

4

3 回答 3

2

注意事项：

1）您在初始化时暂停了轮播。这可以解释最初的停顿。轮播自动继续下一张幻灯片，显示默认延迟后的后续幻灯片，显然是 5000ms。

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

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

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

3) [更新 - 忽略前两个观察结果]

轮播似乎是从幻灯片-1开始的。由于没有幻灯片-1，旋转木马的高度保持在0px。轮播的高度仅560px在第一张幻灯片完成动画后更新。这就是为什么第一张幻灯片没有动画，而且在默认的幻灯片延迟 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; }
于 2013-03-01T15:46:48.497 回答
0

这实际上是一个简单的修复。只需将活动类应用于第一个元素以显示它（或者您想要首先显示的任何一个）。否则，您将等到 dom 已加载并且轮播已初始化为您执行此操作。

所以下面的这个可以解决问题并立即显示轮播，而无需等待 JS：

<div class="carousel-inner">
    <div class="item mtt-item active">...</div>
    <div class="item mtt-item">...</div>
</div>
于 2013-03-01T15:14:45.197 回答
-1

我建议您执行以下操作：

  1. 减小图像的大小。

  2. 将您的 css 文件合并为一个 .

  3. 合并js文件。

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

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

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

于 2013-02-22T08:38:12.577 回答