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

问题描述

我尝试将wootheme的Flexslider集成到我的网站上，除了加载时它外观/效果很好。

I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.

当你用滑块刷新页面时， flexslider加载（大约1秒）第一张幻灯片显得非常大，闪烁为黑色然后消失，然后出现轮播。

When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.

我认为图片的加载速度比jquery快？我如何隐藏图像unti jquery加载（就像在演示网站上，即使我刷新30亿次，问题永远不会在他们的网站上重复，它都会正常加载！ - ）

I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )

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

I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:

$(document).ready(function() {

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

推荐答案

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

You need to deal with the callback functions for the plugin you are usinghide all the images from CSS by using a class let's say flexImages

$(document).ready(function() {

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

这篇关于如何在jquery flexslider完成加载之前隐藏图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！