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 回答