22

我在我正在构建的网站上使用 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

4

6 回答 6

56

好的。所以我找到了一种方法。

在 flexslider css 文件中添加这一行

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

在此行之后的行：

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

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

于 2012-10-04T13:03:11.830 回答
6

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

寻找

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

并将选择器更改为

.flexslider .slides > li:not(:first-child)
于 2013-06-02T16:32:01.023 回答
1

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

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
于 2013-05-04T06:14:25.790 回答
1

我找到了最流畅的方法来做到这一点。

在这样的 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();
    }
  });
});
于 2016-01-22T16:08:31.847 回答
0 
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

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

于 2015-12-24T09:11:33.303 回答
-1

有几种方法可以走。

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

<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 布局进行轻微更改，但您可以根据需要拥有尽可能复杂的幻灯片。

于 2012-10-03T21:30:28.583 回答