10

我试图在我的网站上集成 wootheme 的 Flexslider，它看起来/工作得很好，除了它在加载时。

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

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

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

$(document).ready(function() {

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

6 回答 6

22

您需要处理正在使用的插件的回调函数，通过使用一个类来隐藏 CSS 中的所有图像让我们说flexImages 

$(document).ready(function() {

  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4, 
    start: function(){
         $('.flexImages').show(); 
    },
  });
});
于 2013-02-01T22:04:16.753 回答
6

将“显示”的默认样式设置为“无”。使用 show() 将更改此样式值。

于 2013-02-01T22:01:29.230 回答
1

还发现幻灯片在加载之前会闪烁，并显示与列表项项目符号一起堆叠在页面下方。

只是一秒钟。然后它工作得很好。我没有意识到我没有包含 flexslider.css 文件，因为我已经关闭了任何会显示损坏的导航 img 链接的导航。

记得包含 CSS！

于 2013-12-03T18:01:54.620 回答
1

...我遇到了同样的问题，尝试了上面的 js 解决方案 - 它运行良好，但后来我意识到当 js 由于某种原因被禁用时 - 什么都不会显示，所以我决定寻找一个非 js 解决方案：

我只是为特定的滑块放了一些类似的东西：

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

工作得很好，甚至反应灵敏。希望这可能会有所帮助！

于 2015-04-21T17:03:18.380 回答
0

我只是在包含滑块的 div 的 CSS 中设置： overflow:hidden ；高度：您使用的图像的高度，那么它就完美了！

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

于 2014-03-18T16:42:01.440 回答
0

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

于 2013-05-29T15:12:47.167 回答