预加载整个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() 
})