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

Question

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

当您使用 slider 刷新页面时，在 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
  });
});

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(); 
    },
  });
});