jQuery Flexslider 图片加载缓慢
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12717097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexslider slow image load
提问by Alfred Larsson
I am using Flexslider on a website I'm building.
我正在构建的网站上使用 Flexslider。
I like the responsiveness very much and thats the reason I don't wan't to change to nivo-slider or something similar.
我非常喜欢响应能力，这就是我不想更改为 nivo-slider 或类似内容的原因。
The negative about it is that it doesn't display the first image before all images are loaded. So you have to wait to all images in the slider is loaded to make the site look properly. This is acceptable on a desktop/laptop but not on a mobile device.
它的缺点是在加载所有图像之前它不会显示第一张图像。因此，您必须等待滑块中的所有图像都加载完毕才能使站点看起来正常。这在台式机/笔记本电脑上是可以接受的，但在移动设备上是可以接受的。
I found a similar question here Flexslider - image preloaderbut I couldn't get it to work.
我在这里Flexslider - image preloader发现了一个类似的问题，但我无法让它工作。
I use this to trigger the code
我用它来触发代码
$(window).load(function() {
$('.flexslider').flexslider();
});
And this in my HTML
这在我的 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>
The question is. How can I make the slider show the first image as quick as possible? and then the second and so on.
问题是。如何让滑块尽快显示第一张图像？然后是第二个，依此类推。
EDIT: I solved the problem. It is presented in the correct answer below. If you have a better solution: please share :D
编辑：我解决了这个问题。它显示在下面的正确答案中。如果您有更好的解决方案：请分享：D
回答by Alfred Larsson
Ok. so I found out a way to do it.
好的。所以我找到了一种方法来做到这一点。
in the flexslider css file add this line
在 flexslider css 文件中添加这一行
.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;}
at the line after this line:
在此行之后的行：
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
That will make the first image appear and it will wait for the other images to load before it spins.
这将使第一个图像出现，它会在旋转之前等待其他图像加载。
回答by Liam Potter
I know this is an old issue but I have a simpler solution.
我知道这是一个老问题，但我有一个更简单的解决方案。
Find
找
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
and change the selector to
并将选择器更改为
.flexslider .slides > li:not(:first-child)
回答by U?ur Ta?dildiren
I found smoothest way to do this.
我找到了最流畅的方法来做到这一点。
Add a div with slider's first image before flexslider container like this.
像这样在 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>
Then add following code to flexslider initalization:
然后在 flexslider 初始化中添加以下代码：
$(window).load(function(){
$('.flexslider').flexslider({
.
.
.
.
.
start: function(slider){
$('.pre-flexslider-container').css("display","none");
$('.main-flexslider-container').css("display","block");
slider.resize();
}
});
});
回答by Gurwinder Singh
I have quickly fix this issue by adding css style in flexslider stylesheet the style is:
我通过在 flexslider 样式表中添加 css 样式来快速解决这个问题，样式是：
.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
回答by Mehmet Eren Yener
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
if you set smoothHeight as true try in default mode then it can improve the performance also
如果您将 smoothHeight 设置为 true 尝试在默认模式下，那么它也可以提高性能
回答by Derek
There are a couple of ways you can go.
有几种方法可以走。
First you could try adding hidden image tags such as:
首先，您可以尝试添加隐藏的图像标签，例如：
<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>
to preload your images. I would recommend against this method however.
预加载您的图像。但是，我建议不要使用这种方法。
Another solution which will show your content quickly (but has not been tested with IE6) is to use the slider found at https://github.com/ozzyogkush/jquery.contentSlider. This is a slider widget I've been developing which works great. It would require a slight change to your DOM layout, but you can have as complex slides as you need.
另一个可以快速显示您的内容（但尚未在 IE6 上进行测试）的解决方案是使用https://github.com/ozzyogkush/jquery.contentSlider 上的滑块。这是我一直在开发的一个滑块小部件，效果很好。这需要对您的 DOM 布局稍作更改，但您可以根据需要拥有尽可能复杂的幻灯片。
