Flexslider 缓慢的图像加载答案

【问题标题】：Flexslider slow image loadFlexslider 缓慢的图像加载
【发布时间】：2012-10-03 21:20:06
【问题描述】：

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

【问题讨论】：

标签： jquery html preload flexslider

【解决方案1】：

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

在 flexslider css 文件中添加这一行

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

在此行之后的行：

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

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

【讨论】：

这给了我一个错误，图像在瞬间被扭曲和拉伸，似乎在图像加载完成时发生。
在哪个浏览器中？我看不到它
发表评论可能为时已晚，但是是的，第一张图片被拉伸了半秒。当您在移动设备中查看它时会发生这种情况。在 Chrome、Opera、Mozzila 和几乎所有浏览器中。
我也有这个问题。
值得注意的是，您还需要将 CSS3 backface-visibility 属性与 -webkit-backface-visibility 属性一起添加以提高浏览器兼容性。

【解决方案2】：

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

查找

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

并将选择器更改为

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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();
    }
  });
});

【讨论】：

这个确实帮助了我，tnx。 Css 解决方案显示了第一个隐藏的幻灯片，但它已经有大约 33% 的宽度，我想我有旧版本或新版本的 flexslider。

【解决方案5】：

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

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

【讨论】：

【解决方案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 改变。