在Bootstrap Carousel Load之前显示加载微调器

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

Bootstrap Doc：

根据bootstrap documentation Carousel提供以下活动：

• slide.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");
    });

P.S： 以上代码未经过测试，但它会带您前往