Flexslider 未在 Chrome + Safari 中加载第一张幻灯片答案

【问题标题】：Flexslider not loading first slide in Chrome + SafariFlexslider 未在 Chrome + Safari 中加载第一张幻灯片
【发布时间】：2014-04-29 07:03:52
【问题描述】：

iamjen.me/yercheck

所以我在上面的新网站上使用它，并尝试了此线程中显示的所有解决方案：Flexslider slow image load（当然是单独的），但问题仍然存在于 Chrome 和 Safari 中。但是，在 FF 和移动设备上，加载效果非常好（我还没有在 PC 上测试过）。现在，我已经有了 Alfred Larsson 的解决方案。我尝试了每一个调整和不调整 js 中的 initDelay，因为在我的情况下，第一张幻灯片根本没有显示 - 它直接跳到第二张，所以我尝试延迟，所以我至少可以看到第一张幻灯片.目前，initDelay 设置为 1400 毫秒，这是不可取的，但在解决更大的加载问题之前，这是我的最佳选择。

这是上面引用的 flexslider.css 中的代码：

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

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

我的 HTML 非常无害：

<div id="home-slider" class="flexslider">           

<ul class="slides styled-list">

<li class="home-slide"><p class="home-slide-content">
I like things that are<span class="highlight"> easy to use</span></p></li>

<li class="home-slide"><p class="home-slide-content">
I <span class="highlight"><i class="icon-heart"></i></span> technology</p></li>

<li class="home-slide"><p class="home-slide-content">
I think <span class="highlight">failure</span> gets a bum rap</p></li>

<li class="home-slide"><p class="home-slide-content">
And I totally <span class="highlight">dig</span> end users</p></li>

</ul>
</div><!-- END FLEXSLIDER -->

关于为什么它仍然无法在 Chrome 和 Safari 中运行，但在 FF 和移动设备上按预期加载的任何建议？这显然不是网站重量问题，所以我很难过。谢谢！

【问题讨论】：

PC 下使用 chrome/safari/firefox 没有发现问题。
是立即加载，还是您看到预加载器图像，然后在图像加载前几秒钟出现白屏？因为我将 initDelay 设置为 1400 毫秒，所以现在应该显示第一张幻灯片，但是整个显示的延迟非常糟糕。
我能够在 PC 上进行测试。 FF、Chrome 和 IE 11 在加载前在预加载器和图像显示之间都有延迟。 Safari 立即加载。

标签： javascript jquery css flexslider

【解决方案1】：

在仔细研究了 javascript 和 CSS（我和其他人）之后，事情并没有加起来。最后，我拿了我的 index.html 代码和原始 Jarvis 主题代码，并逐节做了代码比较，看看主要区别在哪里。

瞧，我在最不可能的地方隔离了问题！一旦定义了源，主题提供的视频嵌入短代码就会导致问题。我认为这与视频的大小有关，它基本上是在显示滑块之前加载视频（下面的代码）。

<div class="sixteen columns">
<h3>Responsive Video</h3>  
<iframe src="http://player.vimeo.com/video/34234286?color=f2eee5" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="fitvid600154"></iframe>
</div>

删除 iframe 嵌入，视频可以完美加载（虽然当时有一些 css 显示问题，但很容易解决）。更换它，加载问题又回来了。我不知道在 javascript 中的哪个位置进行更正，所以如果有人知道如何更正此问题，以便在仍在加载时显示滑块，那就太好了。

【讨论】：

【解决方案2】：

我在 flexslider 中找到了解决 Safari 头痛的解决方案，如果您有一个响应式站点，这有点乏味，但到目前为止，即使在多次清除缓存后，它也可以在所有浏览器上运行。

在您的 flexslider 代码所在的 CSS 中

.flexslider .slides > li {
    display: list-item;
    min-height: 583px;
    -webkit-backface-visibility: hidden;
}

现在，这对我有用，因为我所有的起始图像都是相同的尺寸，所以我将最小高度设置为图像的常用起始尺寸。例如，如果您开始使用的所有图像的高度均为 600 像素，则将最小高度设置为 600 像素。

其次，您必须为响应式媒体查询中的各种断点调整最小高度，因此我为以下屏幕尺寸设置了一些不同的断点

我根据起始图像的高度为不同的断点添加了以下内容

@media (max-width:1199px) {
    .flexslider .slides > li {
        min-height: 451px;
    }
}

@media (max-width:979px) {
    .flexslider .slides > li {
        min-height: 516px;
    }
}

@media (max-width:767px) {
    .flexslider .slides > li {
        min-height: 435px;
    }
}

@media (max-width:640px) {
    .flexslider .slides > li {
        min-height: 311px;
    }
}

@media (max-width:480px) {
    .flexslider .slides > li {
        min-height:  218px;
    }
}

@media (max-width:420px) {
    .flexslider .slides > li {
        min-height: 218px;
    }
}

这有点像 hack 修复，但它对我有用，可能会帮助其他想要克服 safari 错误的人，请查看我的网站和 www.christiantomiak.com/portfolio3.html 上的投资组合部分，原因开始时，主页有一个图像预加载器，它也可以克服这个错误，但如果有人没有登陆主页，则不会。

【讨论】：