使用window.onload時，Bootstrap傳送帶不會自動開始滑動

Question

我真的不知道可能是什么問題。 我是新手，正在嘗試使用javascript，所以也許您知道問題所在。 這是我的footer.php代碼：

<!-- 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>-->

如您所見，現在將最后一個腳本放入注釋中。 當我取消對最后一個腳本的注釋（想要使用window.onload），並將$（document）.ready放入注釋中時，輪播將不會自動開始滑動。 但是在這種情況下，他會的。 我不知道什么會觸發這個問題。 我要使用window.onload，因為我正在嘗試SEO，並希望頁面盡快加載。

如果你們中的任何一個可以幫助我並提及問題所在，那將是很棒的。 那可能會幫助我更好地了解如何使用JavaScript。 :)

提前致謝！

PS。 這是我的輪播代碼，但我不認為這是問題所在：

        <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>

Answer 1

嘗試通過以下方式初始化輪播的js：

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});