Wie BxSlider alle Folien ausblenden, bis die Seite geladen wird

Ich verwende den neuesten bx Slider für meine Website, aber alle Folien sind sichtbar und übereinander gestapelt, bevor die Seite geladen wird. Ich habe diese versuchte man auch
cssWie BxSlider alle Folien ausblenden, bis die Seite geladen wird

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

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

, wenn ich dies der bx Schieber nach Laden der Seite versteckt habe tat.

Quelle

2016-04-15 ub_303

Warum haben Sie die Höhe als 0 festgelegt? BxSlider kann es für dynamische Berechnungen verwenden. Wenn height 0 ist, kann die Höhe der nachfolgenden Elemente auch 0 werden. – Abhi

Und wenn Sie wollen, wenn für die Seite laden dann wickeln Sie es innerhalb 'window load' Event – Abhi

können Sie etwas mehr erklären –

Ich benutze eine Funktion, die das Aufrufen einer Webseite beim Laden verzögert. Ich brauche es zu verhindern FOUC (Flash Of Unstyled Content), aber das könnte auch für Sie arbeiten.

Nutzungs

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

SNIPPET

$(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>

Quelle

2016-04-16 06:20:32 zer00ne

Was ich tat, war die Folien display: none

Dann setzen Sie bxSlider.bxSlider( onSliderLoad: slide.css('display', 'block'); )

So etwas ...

Quelle

2016-08-17 11:42:19 shelune

Wie BxSlider alle Folien ausblenden, bis die Seite geladen wird

Antwort

Verwandte Themen