lundi 20 avril 2015

Script not firing properly after preloader script

Very limited script experience.

I am attempting to get a preloader to cover my images loading in a bootstrap carousel before a second script cycles through them.

This script is as far as I can get.

<!-- Preloader -->
<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(50).fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('body').delay(50).css({'overflow':'visible'});
        })
    //]]>
</script>

and

<!-- Script to Activate the Carousel -->
<script type="text/javascript">
$('#preloader').delay(50).fadeOut('slow', function(){
  $('.carousel').carousel({
      pause: "none",
      interval: 500
  });
});
</script>

The sequence I need is loading animation div covering images loading in "#myCarousel" > images have loaded > covering div fades out > fade out calls:

$('.carousel').carousel({
        interval: 500, //changes the speed
        pause: "none",
    })

Images flick through and stops on final slide.

In the example above, it seems to work – the preloader works, the carousel works too but not at the expected speed; "500" is meant to be half a second. It also seems to break the pause function to, the fact pause is set to "none" seems to be ignored.

After some help from @Shikkediel the script now reads:

<script type="text/javascript">
$(window).on('load', function() {

    $('#status').fadeOut()
    .queue(function() {

        $('#preloader').delay(50).fadeOut('slow', function() {
            $('#myCarousel').attr('data-ride', 'carousel');
            $('.item').first().addClass( 'active' );
            $('body').delay(50).css({'overflow':'visible'});
            $('.carousel').carousel({
            });
        });
        $(this).dequeue();
    });
});
</script>

– the speed and pause are now set in the data attributes, which is great to have them set in there out of the way.

However, the preloader still does not pre load the images!

This is the test I have running: http://ift.tt/1zyVtnO

Aucun commentaire:

Enregistrer un commentaire