Flexslider 图片加载慢

Question

我正在建设一个网站，使用Flexslider。我很喜欢它的响应式效果，所以不想改成nivo-slider或类似的东西。

但是，它的一个缺点是在所有图片加载完成之前不会显示第一张图片。因此，您必须等待所有图片加载完成，才能使网站正常显示。这在台式机/笔记本电脑上是可以接受的，但在移动设备上则不行。

我在这里找到了一个类似的问题：Flexslider - image preloader，但我无法使其工作。

我使用以下代码来触发它：

$(window).load(function() {
        $('.flexslider').flexslider();
    });

这是我的 HTML 代码

                <ul class="slides">             
                <li>
                    <img src="pictures/slide1.jpg" alt=" ">
                <li>
                    <img src="pictures/slide2.jpg" alt=" ">                         
                </li>
                <li>
                    <img src="pictures/slide3.jpg" alt=" ">
                </li>
                <li>
                    <img src="pictures/slide4.jpg" alt=" ">
                </li>
            </ul>

问题是，我如何让幻灯片展示第一张图片尽快出现，然后是第二张，以此类推。

编辑：问题已解决。正确的答案在下面呈现。如果你有更好的解决方案，请分享 :D

- Alfred Larsson

Answer 1

好的，我找到了一种方法。

在flexslider的css文件中添加这一行

.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;} 

在这一行之后的那一行：

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

这将使第一张图片显示并在其他图片加载完之前等待它旋转。

- Alfred Larsson

---

这让我感到困扰，就在图片完成加载的瞬间，图像会变形和拉伸。 - Jeger

在哪个浏览器中？我看不到它。 - Alfred Larsson

也许现在留言有点晚，但是第一张图片确实会被拉伸半秒钟。这种情况发生在你使用移动设备查看图片时。无论是在Chrome、Opera、Mozzila还是几乎所有的浏览器上都会出现这个问题。 - Guy in the chair

我也遇到了这个问题。 - Peter Chappy

值得注意的是，您还需要添加CSS3背面可见性属性与-webkit-backface-visibility属性相结合，以增加浏览器兼容性。 - Elitmiar

Answer 2

我知道这是一个旧问题，但我有一个更简单的解决方案。

找到

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

将选择器更改为

.flexslider .slides > li:not(:first-child)

- Liam Potter

Answer 3

我发现了最顺畅的方法来实现这个。

像这样在flexslider容器之前添加一个带有滑块第一张图片的div。

<div class="pre-flexslider-container">
     <img src="slider.jpg">
</div>
<div class="main-flexslider-container" style="display: none">
    <div class="flexslider">
    .
    .
    .
    </div>
</div>

然后在Flexslider初始化中添加以下代码：

$(window).load(function(){
  $('.flexslider').flexslider({
    .
    .
    .
    .
    .
    start: function(slider){
        $('.pre-flexslider-container').css("display","none");
        $('.main-flexslider-container').css("display","block");
        slider.resize();
    }
  });
});

- Uğur Taşdildiren

---

这个真的帮了我，谢谢。CSS解决方案显示了第一个隐藏幻灯片，但它已经在某些33%的宽度中，我猜我有旧版或新版的Flexslider。 - Jiro Matchonson

Answer 4

我通过在flexslider样式表中添加CSS样式来快速解决了这个问题，样式如下:

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}

- Gurwinder Singh

Answer 5

smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

如果你将smoothHeight设置为true并在默认模式下尝试，它可以提高性能。

- Mehmet Eren Yener

Answer 6

有几种方法可以选择。

首先，您可以尝试添加隐藏的图像标签，例如：

<img src="pictures/slide1.jpg" style="display:none">
<img src="pictures/slide2.jpg" style="display:none">
<img src="pictures/slide3.jpg" style="display:none">
<img src="pictures/slide4.jpg" style="display:none">
<ul>...your slides...</ul>

预加载您的图像。然而，我建议不要使用这种方法。

另一种解决方案是使用在https://github.com/ozzyogkush/jquery.contentSlider找到的滑块，它可以快速显示您的内容（但尚未与IE6进行测试）。这是一个我一直在开发的滑块小部件，非常好用。它需要对DOM布局进行轻微更改，但您可以拥有任意复杂的幻灯片。

- Derek

---

抱歉，那没起作用。我真的不想改用flexslider。 - Alfred Larsson