Question

我正在使用Flexslider来显示项目及其各自的图片。

在页面加载时会发生的情况是，所有li首先显示为带有项目符号的列表。一秒钟后，插件就会被应用。

我尝试通过CSS隐藏原始列表（未插入插件），但无法正常工作。

编辑：我也尝试过document.ready。这也没有帮助。

修改：我也建议隐藏内容的解决方案，除非应用该插件。

如果需要任何其他细节，请告诉我。对不起，英语不是我的第一语言。

这是我的代码。

HTML ：

<div id="slider" class="flexslider">
    <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
    </ul>
</div>

<div id="carousel" class="flexslider">
      <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

JS ：

$(window).load(function() {

$('#carousel').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 210,
   itemMargin: 5,
   asNavFor: '#slider'
});

$('#slider').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   sync: "#carousel"
});

});

Answer 1

尝试使用文档就绪事件而不是窗口加载 -

jQuery(document).ready(function ($) {

Answer 2

这里的问题是您在$(window).load(...)事件中执行插件初始化。 load事件的事情是它等待所有内容和 all 完全获取页面上的图像。您可能需要一个$(document).ready(...)事件处理程序。这将更早执行，你希望看不到任何眨眼。

$(document).ready(function() {
  $('#carousel').flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider',
  });

  $('#slider').flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: '#carousel',
  });
});

您可以阅读有关$(document).ready(...)事件的更多here。它在许多情况下都很有用。阅读有关DOMContentLoaded的内容可以获得很多好处，view container containment是jQuery ready的现代替代品，现在更受欢迎。

jQuery滑块插件花时间绑定

2 个答案: