Question

我尝试将wootheme的Flexslider集成到我的网站上，除了加载时它外观/效果很好。

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

我认为图像的加载速度比jquery快？我如何隐藏图像unti jquery加载（就像在演示网站上，即使我刷新30亿次，问题永远不会在他们的网站上重复，它们都会正常加载！ - http://flexslider.woothemes.com/carousel-min-max.html）

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

$(document).ready(function() {

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

Answer 1

您需要处理正在使用的插件的回调函数 使用类{〗flexImages

隐藏CSS中的所有图像

$(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解决方案：< / p>

我只为特定的滑块添加了类似的东西：

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

效果很好，甚至反应灵敏。希望可能有所帮助！

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

6 个答案: