Twitter Bootstrap Carousel 插件在页面加载时延迟答案

【问题标题】：Twitter Bootstrap Carousel plugin delay on page loadTwitter Bootstrap Carousel 插件在页面加载时延迟
【发布时间】：2012-02-10 02:40:15
【问题描述】：

不知道插件为什么会这样，但是每当我使用轮播插件刷新页面时，包含的 div 会在 5 秒内为空白，然后轮播将开始正常运行——滑过。

我创建了一个精简版本，只是为了看看是否有其他事情阻碍了事情的发展。这是我所拥有的：

<html>
    <head>

        <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="css/carousel.css" type="text/css">

        <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>

        <script type="text/javascript" src="scripts/bootstrap-transition.js"></script>
        <script type="text/javascript" src="scripts/bootstrap-carousel.js"></script>

        <script type="text/javascript">
            $(function() {
                $('#myJumbotron').carousel();
            }); 

        </script>

    </head>

    <body>

        <!-- JUMBOTRON
===================================================================== -->
        <div class="container">
            <div class="row">
                <section class="span16">

                    <div id="myJumbotron" class="carousel">
                        <div class="carousel-inner">

                            <div class="item">
                                <img src="images/jumbotron.jpg" alt="Featured specials" />
                            </div>

                            <div class="item">
                                <img src="http://placehold.it/940x380" alt="Featured specials" />
                            </div>

                            <div class="item">
                                <img src="images/jumbotron.jpg" alt="Featured specials" />
                            </div>

                        </div>
                        <a class="left carousel-control" href="#myJumbotron" data-slide="prev">&lsaquo;</a>
                        <a class="right carousel-control" href="#myJumbotron" data-slide="next">&rsaquo;</a>
                    </div>

                </section>
            </div>
        </div>

    </body>

</html>

我使用 SimpLESS 工具仅将 carousel.less 文件编译为自己的 carousel.css 文件，并且 bootstrap.min.css 也未修改。

你可以在这里看到发生了什么：furnitureroadshow.com。对此的任何帮助将不胜感激。

【问题讨论】：

标签： jquery twitter-bootstrap jcarousel

【解决方案1】：

为 html 中的第一个项目类“活动”添加，现在您正在等待 1 个周期。

前：

                       <div class="item active">
                            <img src="images/jumbotron.jpg" alt="Featured specials" />
                        </div>

                        <div class="item">
                            <img src="http://placehold.it/940x380" alt="Featured specials" />
                        </div>
......

【讨论】：

谢谢。在 10 个小时的编码之后，这样的事情会被忽略。哈哈。