Javascript 预加载整个引导转盘

长期读者，第一次海报

我最近开始学习使用bootstrap

我被困在试图让一个引导转盘预加载显示一个纺车（或类似的效果）

我已经拼凑了我想要的效果，我的前四张图片“快速浏览”，旋转木马在我的最后一张图片上停止——但我无法管理的是，在旋转木马开始之前，将整个旋转木马内容装载到一个旋转的轮子后面

这是我正在进行的工作–因此，您可以看到，在启动旋转木马脚本并开始快速浏览幻灯片之前，需要使用“正在加载”加载整个标题标记

<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>

$（'.carousel'）。carousel({
间隔：500，//改变速度
暂停：“无”，
})

正如我在学习如何处理这些事情时经常遇到的情况一样，我认为可能是我遗漏了一些简单的事情——是这样吗？

删除数据ride=“carousel”-这就是在页面加载时触发carousel开始移动的原因。相反，只要准备好了，就可以使用javascript手动启动旋转木马

$('.carousel').carousel()

注意-如果您想等待图像全部加载完毕。你会把这个手动启动放在一个窗口里，就像这样

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

---

jQuery的解决方案是将

d-block

添加到所有

.carousel项目

元素中，并将其放置在底部

标记之后：

$(window).on("load",function() {
     $('.carousel-item').removeClass("d-block");
})

---

看起来你在幻灯片上使用了背景图像，是吗？也许你应该检查一下我的“Widgets/Javascript/Script”部分，我确实看到了“Widgets…”部分，但在我的设置中没有任何效果