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

【问题标题】：How to hide images until AFTER jquery flexslider finishes loading如何在 jquery flexslider 完成加载之前隐藏图像
【发布时间】：2013-01-17 07:40:37
【问题描述】：

我尝试在我的网站上集成 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
  });
});

【问题讨论】：

标签： javascript jquery flexslider woothemes

【解决方案1】：

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

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

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

运行良好，反应灵敏。希望能有所帮助！

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

记得包含 CSS！

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

$(document).ready(function() {

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

【讨论】：

非常感谢！那成功了！ Woothemes 没有提到这样做，但无论如何他们的演示都能完美运行！
我很高兴它有所帮助，但我对您的建议是，当您遇到插件问题或阅读有关其回调的此类内容时，它真的会有所帮助:)

【解决方案6】：

将“显示”的默认样式设置为“无”。使用 show() 会改变这个样式值。

【讨论】：

我想补充：在
元素上这样做很重要。