在 Bootstrap Carousel 加載之前顯示加載微調器

Question

我試圖在加載輪播之前以及單擊輪播的左右控件時顯示微調器。 目前，我可以使用以下代碼在頁面加載之前顯示微調器。

 //HTML code

  <script src="js/jquery-1.11.3.min.js"></script>

 code just after body tag
  <div id="loader">
  </div>

  //CSS code..

  #loader{
  z-index:999999;
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249); 
  }

  //JS code..

  $(window).load(function(){
        $("#loader").delay(1000).hide(0).fadeOut("slow");
    });

現在使用上述邏輯，每次用戶使用以下代碼單擊引導程序的左/右控件時，我都嘗試顯示較小尺寸和透明背景的微調器..

HTML代碼..

    <div id="carouselObject">
            <div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000">    <!--data-interval= 5000 seconds-->  
                <div class="carousel-inner" role="listbox" id="carouselinner">

                </div>

                <a class="left carousel-control" href="#/carousel-example-generic" role="button">               <!--data-slide="prev"-->
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#/carousel-example-generic" role="button">              <!--data-slide="next"-->
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

       <div id="carousel_spinner">
       </div>

CSS代碼...

        #carousel_spinner{
        z-index:999999;
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:50%;
        height:50%;
        background:url(../images/loader.gif) 50% 50% no-repeat; 
        }

JS代碼..

 function loadNextSlide(){
    $("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
 }

上面的代碼在頁面加載時在左上角顯示了一個小微調器，當我單擊輪播的右側控件時，沒有顯示微調器.. 不明白我哪里出錯了..請幫忙..

Answer 1

引導文檔：

根據引導文件Carousel 提供以下事件：

• 幻燈片.bs.carousel

  當輪播即將從一個項目滑到另一個項目時發生

• slid.bs.carousel

  當輪播完成從一個項目滑到另一個項目時發生

---

你需要什么：

是把你的微調代碼放在里面：

$("#carouselObject").on('slide.bs.carousel', function () {
           //show spinner here
 });

然后在slid事件中隱藏該微調器代碼：

$("#carouselObject").on('slid.bs.carousel', function () {
       //hide the spinner here
       $("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
    });

PS：上面的代碼沒有經過測試，但它會帶你去你要去的地方