Question

在文档中，它表示轨道将在加载所有必要文件后加载一类.orbit。但是在我的网站上，它永远不会停止微调器并加载元素，而不是图像。当JavaScript执行时，它似乎没有将.orbit附加到类中。

这是HTML

        <li>
            <img src="./img/demos/demolarge1.png" />
            <div class="orbit-caption">The living room of the future</div>
        </li>
        <li>
            <img src="./img/demos/demolarge2.png" />
            <div class="orbit-caption">The new emporium by London</div>
        </li>
        <li>
            <img src="./img/demos/demolarge3.png" />
            <div class="orbit-caption">Warren Buffet's 8th stake in the real estate market</div>
        </li>
    </ul>
</div>

这是CSS

#featured { background: url(../img/spinner.gif) center center #f4f4f4 no-repeat; height: 450px; }
#featured img { display: none; }
#featured.orbit-container { background: none; }
#featured.orbit-container img { display: block; }

我在这里缺少什么？该网站位于biggdesigns.com 谢谢！

解决方案：我发现我使用的是安装了版本4的版本3文档。尔加！

Answer 1

为您的加载gif创建一个单独的div，其类为.loading，并将gif设置为此背景。然后为您的图像添加类似.featuredIMG的内容。

在CSS中执行以下操作：

.featuredIMG{display: none;}

然后在您的JQuery中，将滑块初始化和隐藏/显示各个类绑定到$(window).load事件：

$(window).load(function(){
  $("#featured").orbit();
  $(".featuredIMG").show();
  $(".loading").hide();

});

这将显示加载的gif，直到所有图像都已加载，然后隐藏加载div，初始化滑块并显示滑块内容。这是我找到的最干净的方式。

编辑：将加载div放在#featured div之外，并将其高度和宽度设置为幻灯片的高度和宽度。

基础轨道加载微调器不会消失

1 个答案: