在引导轮播加载之前显示加载微调器

Show loading spinner before Bootstrap Carousel Load

本文关键字：加载 显示      更新时间：2023-09-26

我正在尝试在轮播加载之前以及当您单击轮播的左右控件时显示微调器。目前，我能够使用以下代码在页面加载之前显示微调器。

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

现在使用上面的逻辑，我尝试在用户使用以下代码单击引导程序的左/右控件时显示较小尺寸和透明背景的微调器。

网页代码..

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

上面的代码在页面加载时在左上角显示了一个小微调器，当我单击轮播的右侧控件时，没有显示微调器。不明白我哪里出错了..请帮忙..

引导文档：

根据引导程序文档，轮播提供以下活动：

  • 幻灯片.bs.轮播

    当轮播即将从一个项目滑到另一个项目时发生

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

相关文章：