預加載整個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() 
})