Script not firing properly after preloader script

Question

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://maxsendak.com/test/pu_v2/max_page.html

Answer 1

This was the first draft, a bit of optimised script :

$(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({
                interval: 500,
                pause: 'none'
            });
        });
        $(this).dequeue();
    });
});

But it didn't quite have the expected result - the images are set as background and not detected by the onload event. I would propose preloading, appending to the document and hiding. This should cache them for the slider. Doing an Ajax call doesn't seem to fit well here :

$(document).ready(function() {

    var path = 'http://www.maxsendak.com/test/pu_v2/img/people/max/';

    for (var i = 1; i <= 5; i++) {
        $('<img class="preload" src="' + path + i + '.jpg" alt=""/>').appendTo('body');
    }

    $('.preload').each(function() {
        $(this).one('load', function() {
            $(this).hide();
        });
    });

    $(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(2500).css({'overflow':'visible'}); // after slider finishes
                $('.carousel').carousel();
            });
            $(this).dequeue();
        });
    });
});

That bit of script could be left out of course if the images weren't background, the onload event should then be enough and prevent the flashing in between slides.

Minor update - according to this article Firefox can have some issues (version 37 on Windows 7 desktop at least) with the style of the preloaded images not matching that of the targeted background images. So I've added the relevant style I can see on the slider here which should be enough (also made appending the images a bit more readable) :

for (var i = 1; i <= 5; i++) {

    $('<img class="preload" alt=""/>')
    .attr('src', path + i + '.jpg')
    .css({'height': '100%', 'position': 'relative', 'left': 0})
    .appendTo('body');
}

Hope that's the final detail for a smooth cross browser functionality.