如何在jquery flexslider完成加载之前隐藏图像

Question

我试图在我的网站上整合wootheme的Flexslider，它看起来/效果很好，除了加载时。

当您使用滑块刷新页面时，在flexslider加载（大约1秒）之前，第一张幻灯片显得非常大并闪烁为黑色然后消失，然后出现轮播。

我认为图像的加载速度比jquery快？ 我怎样才能隐藏图像，而不是jquery加载（就像在演示网站上一样，即使我刷新30亿次，问题也不会在他们的网站上重复出现，它们都能正常加载！ - http://flexslider.woothemes.com/carousel -min-max.html ）

我在jquery之后加载了flexlisder.js并从demo中复制了相同的html代码（以匹配同时加载的.css文件。这里是我正在使用的init代码 - 来自演示站点：

$(document).ready(function() {

  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});

Answer 1

你需要处理你正在使用的插件的回调函数隐藏CSS中的所有图像使用类让我们说flexImages

$(document).ready(function() {

  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4, 
    start: function(){
         $('.flexImages').show(); 
    },
  });
});

Answer 2

将“display”的默认样式设置为“none”。 使用show（）将更改此样式值。

Answer 3

还发现幻灯片在加载和显示之前闪烁，并在页面上显示列表项目项目符号。

只有一秒钟。 然后它工作正常。 我没有意识到我没有包含flexslider.css文件，因为我已经转向任何会显示破坏的nav img链接的导航。

记得包括CSS！

Answer 4

当我忘记包含flexslider.css时，我遇到了类似的问题

Answer 5

我只是设置包含滑块的div的CSS：overflow：hidden; 高度：您使用的图像的高度，然后它完美！

更新：这不是一个响应式解决方案，因为滑块改变了大小...我该怎么办？

Answer 6

...我遇到了同样的问题，尝试了上面的js解决方案 - 它工作得很好但后来我意识到当js由于某种原因被禁用时 - 没有任何东西会显示出来，所以我决定寻找一个非js解决方案：

我只是为特定的滑块添加了一些东西：

.MySlider {
  .flexslider .slides img { 
  max-height: 400px; 
  width: 940px;
 }
}

运作良好，甚至反应灵敏。 希望可能有所帮助！