javascript - Flex slider 似乎在 CSS 之前加载

Question

我正在以一种看起来非常简单的方式使用 FlexSlider。然而，在它到达最后一张幻灯片并循环回到第一张幻灯片后，内容似乎“卡入”到位，就好像 slider 先于 CSS 加载一样。

这是一个精简的例子:
http://aj2.w-interactive.com/mds-slider-test2.html

您会注意到，在 slider 从第三张幻灯片返回后(您需要观察它一直循环)，第一张幻灯片中的文本(其中写着“我们传递您的信任”等)。 .) 最初加载时没有样式，然后有点“跳”到位，就好像最终为它加载了样式一样。但是第一次加载时，在循环之前，它完全没问题。

这是页面底部的脚本:

<!-- FlexSlider -->
  <script defer src="assets/js/jquery.flexslider.js"></script>

<script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
		slideshowSpeed: "4500",
		pausePlay: "true",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

如有任何想法，我们将不胜感激。谢谢!

Answer 1

您的 CSS 没有被正确应用，因为您有多个元素具有相同的 ID .

引用:http://www.w3schools.com/tags/att_global_id.asp

“id 属性指定了 HTML 元素的唯一 ID(该值在 HTML 文档中必须是唯一的)。”

您的示例 HTML 中有这个

<li>
    <div id="slides" class="bkgd1">
        <h1 class="fade">We Deliver Your Trust</h1>
        <h1 class="fade">Intermodal Drayage</h1>
        <h2 class="fade">Centrally Located Terminals</h2>
        <h2 class="fade">9 Locations Covering North America</h2>
    </div>
</li>
<li>
    <div id="slides" class="bkgd2">
        <h1 class="fade">Rail &amp; Steamship Interchange</h1>
        <h2 class="fade">Fully Customs Bonded</h2>
    </div>
</li>
<li>
    <div id="slides" class="bkgd3">
        <h1 class="fade">Dedicated Fleet &amp; Preferred Network</h1>
        <h2 class="fade">Real Time Dispatch Technology</h2>
        <h2 class="fade">Instant Proof of Delivery</h2>
    </div>
</li>

这在你的 CSS 中

#slides h1

将这些 ID 更改为类(像这样)

<div class="slides bkgd1">
<div class="slides bkgd2">
<div class="slides bkgd3">

并相应地更改您的 CSS 选择器

.slides h1

然后它应该可以工作了。

更多细节

FlexSlider 创建您的 <div> 的克隆允许平稳循环和重复的元素。当它创建克隆时，它会从原始 ID 复制 ID 并将“_clone”附加到它的末尾。这实际上是您在循环浏览后返回到第一张幻灯片时看到的内容。因此，您的 CSS 样式(#slides h1 等)未被应用。

此外，简单地添加#slides h1, #slides_clone h1是不够的因为我在这个答案中提到的第一件事。 ID 必须是唯一的。