javascript - 在 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");
    });

现在使用上面的逻辑，我试图在每次用户使用下面的代码单击 Bootstrap 的左/右控件时显示一个更小尺寸和透明背景的微调器。

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 文档:

根据 Bootstrap documentation Carousel 提供以下事件:

• slide.bs.carousel

  轮播即将从一个元素滑到另一个元素时发生

• slid.bs.carousel

  轮播完成从一个元素滑动到另一个元素时发生

---

你需要什么:

就是把你的spinner代码放在里面:

$("#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: 上面的代码没有经过测试，但它会带你去你要去的地方