Question

iamjen.me/yercheck

所以我在上面的新网站上使用了这个，并尝试了此主题中显示的所有解决方案：Flexslider slow image load（当然也是另外一个），但问题仍然存在于Chrome和苹果浏览器。然而，在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和移动设备上按预期加载的任何建议？它显然不是网站重量问题，所以我很难过。谢谢！

Answer 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中的哪个位置可以纠正这个问题，所以如果有人知道如何更正这个，那么滑块会在加载时显示，那就太好了。

Answer 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;
    }
}

这是一个黑客修复，但它对我有用，可能会帮助其他人在那里寻找克服safari bug，查看我的网站和www.christiantomiak.com/portfolio3.html上的投资组合部分，原因为了开始，主页有一个图像预加载器，它也可以克服这个错误，但如果有人没有登陆主页则不行。

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

2 个答案: