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

Question

我试图在我的网站上整合wootheme的Flexslider,它看起来/效果很好,除了加载时.

当您使用滑块刷新页面时,在flexslider加载(大约1秒)之前,第一张幻灯片显得很大并闪烁为黑色然后消失,然后出现轮播.

我认为图像的加载速度比jquery快？我怎样才能隐藏图像,而不是jquery加载(就像在演示网站上一样,即使我刷新30亿次,问题也不会在他们的网站上重复出现,它们都能正常加载! - http://flexslider.woothemes.com/carousel -min-max.html)

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

$(document).ready(function() {

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

Answer 1

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

$(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()将更改此样式值.