如何让 BxSlider 隐藏所有幻灯片直到页面加载

Question

我正在为我的网站使用最新的 bx 滑块，但在页面加载之前所有幻灯片都可见并堆叠在一起。我也试过这个
css

.ctaFtSlider{
   visibility: hidden;
   height: 0;
}

Js

$(document).ready(function(){
     $('.bxslider').bxSlider({
           ...
           onSliderLoad: function(currentIndex){
           $(".ctaFtSlider").css("visibility", "visible");
           $(".ctaFtSlider").css("height", "auto");
        }
    });
});

当我这样做时，bx 滑块在页面加载后隐藏了。

Answer 1

我使用了一个在加载过程中延迟显示网页的功能。我需要它来防止 FOUC (Flash Of Unstyled Content)，但这也可能对你有用。

用法

CSS

Add this rule:

   body { visibility: hidden; }

HTML

Add this to `<body>` tag:

   <body onload="delay(1500);">

JS/jQ

    // t is in ms | 1000ms = 1sec

function delay(t) {
  setTimeout('initFadeIn()', t);
}

function initFadeIn() {
  $("body").css("visibility", "visible");
  $("body").fadeIn(500);
}

片段

$(function() {
  $('.bx').bxSlider({
    pager: false
  });
});

// t is in ms | 1000ms = 1sec

function delay(t) {
  setTimeout('initFadeIn()', t);
}

function initFadeIn() {
  $("body").css("visibility", "visible");
  $("body").fadeIn(500);
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>36646468</title>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    body {
      visibility: hidden
    }
    img {
      margin: 0 auto;
      }
  </style>
</head>

<body onload="delay(1500);">

  <section class="bx">

    <div>
      <img src="http://placehold.it/320x180/000/fff?text=1">
    </div>

    <div>
      <img src="http://placehold.it/320x180/00f/fc0?text=2">
    </div>

    <div>
      <img src="http://placehold.it/320x180/fc5/ba6?text=3">
    </div>

    <div>
      <img src="http://placehold.it/320x180/0bb/0ff?text=4">
    </div>

    <div>
      <img src="http://placehold.it/320x180/f3a/52f?text=5">
    </div>

    <div>
      <img src="http://placehold.it/320x180/fff/000?text=6">
    </div>

  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
  </script>
</body>

</html>

Answer 2

我所做的是将幻灯片设置为 display: none

然后bxSlider.bxSlider( onSliderLoad: slide.css('display', 'block'); )

类似的东西...

如何让 BxSlider 隐藏所有幻灯片直到页面加载

How to make BxSlider hide all slides until the page loads

javascript

jquery

css

bxslider