Bootstrap carousel doesn't automatically start sliding when using window.onload

Vote count:

0

I really don't know what the problem could be. I'm pretty new and experimenting with javascript, so maybe you know the problem. This is my footer.php code:

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Javascript for image fancybox -->
<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>    

<!-- Javascript for facebook likes -->
<div id="fb-root"></div>
<script>
(
    function(d, s, id) 
    {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }
    (document, 'script', 'facebook-jssdk')
);
</script>

<!-- Javascript -->
<script src="js/bootstrap.min.js"></script>-->

<!-- To run javascript after page load. Faster page load makes better ranking in google results. --
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "js/bootstrap.min.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else
        window.onload = downloadJSAtOnload;
</script>-->

As you can see, now put the last script in comments. When I uncomment this last script (wanting to use window.onload), and put the $(document).ready in comments, then my carousel won't start sliding automatically. But in this situation as above, he will. I don't know what could trigger this problem. I want to use window.onload because I'm experimenting with SEO and want my page to load as fast as possible.

If any of you could help me out and mention what the problem is, that would be great. That will probably help me understand better how to use javascript. :)

Thanks in advance!

PS. This is my carousel code, but I don't think that's were the problem is:

        <div class="row carousel-holder">

            <div class="col-lg-6 col-md-6 col-md-offset-3">

                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img class="slide-image img-thumbnail" src="img/vaas01.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="slide-image img-thumbnail" src="img/schaal01.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="slide-image img-thumbnail" src="img/schaal02.jpg" alt="">
                        </div>
                    </div>
                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>

            </div>

        </div>

asked 34 secs ago

Kenny

5

Bootstrap carousel doesn't automatically start sliding when using window.onload