Question

我有一个显示GIF的投资组合，直到页面加载完毕。问题是，在GIF下，Bootstrap Carousel甚至在加载所有内容之前都是滑动图像，因此当加载GIF消失时，轮播已经显示图像5或6，而不是第一个。

jQuery(document).ready(function() {
  $('.carousel').carousel({
      pause: "false",
      interval: 8000
  });

  $('.carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
  $('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
  $('.carousel-inner div.item img').each(function() {
    var imgSrc = $(this).attr('src');
    $(this).parent().css({'background': 'url('+imgSrc+') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover'});
    $(this).remove();
  });

  $(window).on('resize', function() {
    $('.carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
  });
});

我尝试将代码修改为：

jQuery(window).load(function() {
  $('.carousel').carousel({
      pause: "false",
      interval: 8000
  });

使用最后一段代码，一旦网站加载，它将显示第一张图片，但轮播将无法启动。

这是我的Html：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="item active">
    <img src="./img/1.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/2.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

  <div class="item">
    <img src="./img/3.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
</div>

</div>

加载gif JS：

<script type="text/javascript">
//<![CDATA[
  $(window).load(function() { // makes sure the whole site is loaded
    $('#status').fadeOut(); // will first fade out the loading animation
    $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
    $('body').delay(350).css({'overflow':'visible'});
  })
//]]>
</script>

对我做错了什么的想法？

Answer 1

您可以使用fadeout的回调功能来调用轮播。这样的事情。

$('#preloader').delay(350).fadeOut('slow', function(){
  $('.carousel').carousel({
      pause: "false",
      interval: 8000
  });
  // more here
});

这将在预加载器褪色后调用该函数。

Answer 2

Natewiley和Joe，你的解决方案正在解决我的问题，但是杀死了为旋转木马设置的属性。按照您的示例，我将以下代码添加到fadeOut中。

$('#preloader').delay(350).fadeOut('slow', function(){
    $( "#carousel-example-generic" ).attr('data-ride', "carousel");
});

由于轮播仅在包含data-ride =“carousel”时启动，我只需在触发fadeOut时添加它。在后台，另一块js仍然会初始化轮播并设置其属性，但它只会在设置data-attribute时启动。

所以，感谢Joe和Nate的帮助！：））

在加载gif完成后，使Bootstrap Carousel开始窗口加载

2 个答案: