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

Answer 1

确定。所以我找到了办法。

在flexslider css文件中添加此行

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

在这一行后面的一行：

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

这将使第一张图像出现，它会在旋转之前等待其他图像加载。

Answer 2

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

查找

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

并将选择器更改为

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

Answer 3

我通过在flexslider样式表中添加css样式来快速修复此问题，样式为：

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

Answer 4

我找到了最顺利的方法。

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

Answer 5

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

如果在默认模式下将smoothHeight设置为true，那么它也可以提高性能

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>

预加载您的图片。不过我建议不要使用这种方法。

另一种能够快速显示您的内容（但尚未使用IE6测试过）的解决方案是使用https://github.com/ozzyogkush/jquery.contentSlider处的滑块。这是我一直在开发的滑块小部件，效果很好。这需要对DOM布局稍作更改，但您可以根据需要使用复杂的幻灯片。

Flexslider减慢图像负载

6 个答案: