dimanche 19 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.


Any ideas what I've done wrong?


Aucun commentaire:

Enregistrer un commentaire