javascript - 预加载整个 Bootstrap 轮播

Question

老读者，第一次海报。

我最近开始学习使用 bootstrap。

我一直在尝试让 Bootstrap 旋转木马预加载以显示纺车(或类似效果)。

我已经拼凑出我想要的效果，我的前四张图片“快速浏览”，轮播停在我的最终图片上——但我无法管理的是让整个轮播内容加载在一个旋转的后面轮播开始前的轮子。

这是我正在进行的工作 – http://maxsendak.com/test/pu_v2/max.html – 所以你可以看到，在触发轮播脚本并开始轻弹幻灯片之前，需要加载“正在加载”的整个标题标签。

<header id="myCarousel" class="carousel carousel-fade" data-ride="carousel" data-wrap="false">

<!-- Wrapper for Slides -->
<div class="carousel-inner">
<!-- START big image panel --><div class="item active">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/1.jpg');">
<div class="text-vertical-center people_text_over_image">

</div>
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/2.jpg');">

</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/4.jpg');">

</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/3.jpg');">

</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/5.jpg');">
<div class="text-vertical-center people_text_over_image">
<h1>Max Wilson</h1>
<h3>Creative</h3>
<br>
<a href="#about" class="btn btn-dark btn-lg">See More</a>
</div>
</div>
</div><!-- END big image panel -->

</div>

</header>

触发轮播的脚本需要在一切加载完成后触发。

<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
    interval: 500, //changes the speed
    pause: "none",
})
</script>

当我学习解决这些问题时，我经常会遇到这种情况，我认为我可能遗漏了一些简单的东西——是这样吗？

Answer 1

删除 data-ride="carousel"- 这是触发轮播在页面加载时开始移动的原因。相反，您可以在准备好时使用 javascript 手动启动轮播

$('.carousel').carousel()

注意 - 如果您想等到图像全部加载完毕。您可以像这样将此手动启动放在窗口加载中

$(window).load(function() {
     // + any other carousel related stuff that has to wait for the images to complete loading
     $('.carousel').carousel()
})