Javascript Flexslider未在Chrome+中加载第一个滑块；游猎

所以我在上面的新站点上使用了这个，并且尝试了这个线程中显示的所有解决方案：（当然是单独的），但是问题仍然存在于Chrome和Safari中。然而，在FF和手机上，加载效果非常好（我还没有在PC上测试过）。现在，我有阿尔弗雷德·拉森的解决方案。我在js中分别尝试了使用和不使用initDelay，因为在我的例子中，第一张幻灯片根本没有显示——它直接跳到了第二张，所以我尝试了延迟，这样我至少可以看到第一张幻灯片。目前，initDelay设置为1400ms，这是不可取的，但在我能够解决更大的加载问题之前，它是我的最佳选择

以下是上面引用的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 -->

我喜欢易于使用的东西

I技术

我认为失败会受到指责

我非常喜欢终端用户

---

关于为什么它仍然不能在Chrome和Safari中工作，但却能在FF和mobile中按预期加载，有什么建议吗？这显然不是一个网站的重量问题，所以我被难住了。谢谢

在仔细研究了javascript和CSS（我和其他许多人）之后，事情就没有进展了。最后，我使用index.html代码和最初的Jarvis主题代码，逐节进行代码比较，看看主要区别在哪里

瞧，我把这个问题隔离在了最不可能的地方！定义源后，随主题提供的视频嵌入短代码会导致问题。我认为这与视频的大小有关，它试图在显示滑块之前加载视频（代码如下）

响应视频

---

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

我在flexslider中找到了解决Safari难题的方法，如果你有一个响应速度很快的站点，但到目前为止，即使在多次清除缓存后，它仍能在所有浏览器上运行，那就有点乏味了

在flexslider代码所在的CSS中查找

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

现在，这对我来说是可行的，因为我所有的起始图像都是相同的尺寸，所以我将最小高度设置为图像的公共起始尺寸。例如，如果您开始使用的所有图像的高度都是600px，则将最小高度设置为600px

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

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

@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漏洞，请查看我的网站和公文包部分，网址为www.christiantomiak.com/portfolio3.html，启动的原因是主页上有一个图像预加载程序，它也可以克服这个错误，但如果有人没有登录主页，它就不会出现问题。

我看不到chrome/safari/firefox的PC下有问题。是立即加载，还是看到预加载程序图像，然后在图像加载前几秒钟出现一个白色屏幕？由于我将initDelay设置为1400ms，第一张幻灯片现在应该显示了，但是整个幻灯片显示的延迟非常糟糕。我能够在PC上进行测试。FF、Chrome和IE 11在预加载和图像显示之间加载之前都有延迟。Safari马上上船了。

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