Создание Bootstrap Начало карусели при загрузке окна после загрузки gif

Question

У меня есть портфолио с отображением GIF до загрузки страницы. Проблема заключается в том, что в GIF загрузочная карусель загружается даже до того, как все загрузится, поэтому к моменту исчезновения загружаемого 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"); 
}); 

Как карусель только начинается, когда содержащий данные ездовые = «карусель», я просто добавить его, когда FADEOUT срабатывает. На заднем плане другая часть js будет инициализировать карусель и установить ее атрибуты, но она начнется только тогда, когда будет установлен атрибут data.

Итак, спасибо Джо и Нейту за помощь! :))