Flexslider缓慢的图像加载 [英] Flexslider slow image load

问题描述

我正在使用我正在构建的网站上的Flexslider。

我非常喜欢这种响应能力，这就是我不想变成nivo-slider或类似的东西的原因。

关于它的负面情况是它在所有图像加载之前不显示第一个图像。因此，您必须等待加载滑块中的所有图像才能使网站正常显示。这是可以接受的桌面/笔记本电脑，但不是在移动设备上。

我在这里找到类似的问题 Flexslider - 图像预加载器，但我无法实现它。

我使用它来触发代码

$ $ $ $ $（$。$ flex $） ;
}）;

这个在我的HTML中

 < ul class =slides> 
< li> 
< img src =pictures / slide1.jpgalt => 
< li> 
< img src =pictures / slide2.jpgalt => 
< / li> 
< li> 
< img src =pictures / slide3.jpgalt => 
< / li> 
< li> 
< img src =pictures / slide4.jpgalt => 
< / li> 
< / ul> 
  

问题是。我如何使滑块尽可能快地显示第一幅图像？然后第二个等等。

编辑：我解决了这个问题。它显示在下面的正确答案中。如果您有更好的解决方案：请分享：D

解决方案

好的。所以我找到了一个办法。

在flexslider css文件中加入这一行

  .flexslider .slides>李：第一个孩子{display：block; -webkit-backface-visibility：visible;} 
  

在这行后面的行中：

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

这会让第一张图片出现，并等待在转动之前加载其他图片。

I am using Flexslider on a website I'm building.

I like the responsiveness very much and thats the reason I don't wan't to change to nivo-slider or something similar.

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 preloader but I couldn't get it to work.

I use this to trigger the code

$(window).load(function() {
        $('.flexslider').flexslider();
    });

And this in my 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

解决方案

Ok. so I found out a way to do it.

in the flexslider css file add this line

.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.

这篇关于Flexslider缓慢的图像加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！